Web前端之Vue+Element校验特殊字符、indexOf、substr

原创已于 2024-10-14 09:48:03 修改 · 890 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #elementui #web #web前端 #vue

于 2022-02-21 11:59:48 首次发布

Web前端同时被 3 个专栏收录

382 篇文章

订阅专栏

45 篇文章

订阅专栏

Element-Ui

21 篇文章

订阅专栏

本文介绍了如何使用HTML、Vue.js和JavaScript实现表单输入验证，着重于字符串中特殊字符的检测与限制。通过实例展示了如何配置El-form组件并自定义验证规则，确保数据的规范性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Html

<div id="app">
	<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
		<el-form-item label="字符串" prop="text">
			<el-input v-model="ruleForm.text" placeholder="请输入"></el-input>
		</el-form-item>
	</el-form>
</div>
以上代码需要引入以下文件：
1、<link rel="stylesheet" href="/node_modules/element-ui/lib/theme-chalk/index.css">
2、<script src="/node_modules/vue/dist/vue.js"></script>
3、<script src="/node_modules/element-ui/lib/index.js"></script>

JavaScript

new Vue({
	el: "#app",
	data() {
		return {
			ruleForm: {
				text: ''
			},
			rules: {
				text: [{
					validator: this.validateQueryFormRules,
					trigger: 'change'
				}]
			}
		}
	},

	methods: {
		validateQueryFormRules(rule, value, callback) {
			if (!this.specialCharacters(value)) return callback(new Error("不能含有特殊字符！！"));
			callback();
		},

		specialCharacters(str) {
			if (!str) return true;

			const specialKey = "[`~!#$^&*()=|{}': ; '\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？‘']";
			for (var i = 0; i < str.length; i++) if (specialKey.indexOf(str.substr(i, 1)) != -1) return false;

			return true;
		}
	}
});