vue实现表单填写输入框校验不能包含中文
目标:form表单内对编码进行校验
- 在el-form-item标签里“定义”,注意一定要加上 :rules=“rules”
<el-form :inline="true" :model="formInline" label-width="120px" :rules="rules" ref="formInline">
<el-form-item label="编码:" prop="SppiCode" >
<el-input v-model="formInline.SppiCode" placeholder="请输入编码" style="width: 220px"></el-input>
</el-form-item>
</el-form>
- 在data()中写规则,其中checkData是方法,需要在method里写
required: true 是那个红色的星星
trigger: ‘blur’ 代表鼠标动了之后就会显示出红框红色校验信息
message: ‘请选择编码’ 代表你想校验的提示信息
data() {
return {
rules: {
SppiCode: [{ required: true, message: '请选择编码', trigger: 'blur' },
{ validator: this.checkData, trigger: 'blur' }]
}
}
}
- 需要在method里写的checkData 方法
checkData(rule, value, callback) {
if (value) {
if (/[\u4E00-\u9FA5]/g.test(value)) {
callback(new Error('不能包含中文!'))
} else {
callback()
}
}
callback()
},
至此,就完成了校验不能包含中文。
其中checkData方法参考的网上博客白肚皮儿博客
,目前是可执行的,如有哪里总结的不到位,请大家多多留言呦~