前端输入框校验限制不能输入中文

记录自己工作遇到的小小问题

一般我们在做表单的时候都会有表单校验,通常都是用element提供的表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。如下面这样

rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],region: [{ required: true, message: '请选择活动区域', trigger: 'change' }]}

这里对name跟region两个字段进行校验,如果不符合规范就提示相应的信息,在这里我们对name字段不允许输入中文,在rules里面name字段加一个规则,如下

rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },{ validator: this.checkData, trigger: 'blur' }],region: [{ required: true, message: '请选择活动区域', trigger: 'change' }]}

checkData是个方法,写在methods中即可

checkData(rule, value, callback) {if (value) {if (/[\u4E00-\u9FA5]/g.test(value)) {callback(new Error('不能为中文!'))} else {callback()}}callback()}