elementUI表单校验问题

**

elementui 的validateField，resetFields，clearValidate的使用

**
在做项目的过程中，遇到这样一个需求，是一个前端的交互问题。
在使用element-ui的表单校验问题上要求：
一个表单中的两个el-input，后面的input里面的内容要与前面的input内容要相等，当两个input输入的内容相同的情况下，校验提示是不会出现的（这是正常情况）但当前者里面的值一发生改变，后面的输入框就直接出现校验提示，而不是说点击此输入框时，才出现校验提示，当然从第二个输入框触发开始改变里面得内容导致与前面输入框的内容不相等时，这个校验提示也是一定会出现的（正常情况）

如何实现

<el-form-item
label="新密码"
prop="newPassword"
>
<el-input
v-model="newPassword"
maxlength="18"
></el-input>
</el-form-item>
<el-form-item
label="请再次输入密码"
prop="confirmPassword"
>
<el-input
v-model="confirmPassword"
maxlength="18"
></el-input>
</el-form-item>

data(){
var checkNewPassword = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入新密码'));
} else{
if(this.confirmPassword） {
if (value !== this.confirmPassword) {
this.$refs.supplierForm.validateField('confirmPassword');
}else {
this.$refs.supplierForm.clearValidate('confirmPassword');
callback();
}
}else {
callback();
}
}
}
var checkPassword = (rule, value, callback) => {
if (!value) {
callback(new Error('请再次输入密码'));
} else{
if (value !== this.newPassword) {
callback(new Error('两次密码不一致'));
} else {
callback()
}
}
}

return{
newPassword:"",
confirmPassword:"",
rules:{
confirmPassword: [
{ required: true, validator: checkName, trigger: ['change', 'blur'] },
]
}
}

知识点：
1 validateField 对部分表单字段进行校验的方法，Function(props: array | string, callback: Function(errorMessage: string))

eg：this.$refs.newForm.validateField(‘photos’)

2 resetFields 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
eg：this.$refs.newForm.resetFields()

3 clearValidate 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
eg：this.$refs.newForm.clearValidate()this.$refs.newForm.clearValidate(‘photos’)

需要注意的是：当手动将内容清空后再使用resetFields ，会被初始化为清空之前（只限于被清空的内容）

PS:代码大致是这么样，如果有些代码漏掉，自己可以看情况补上。

最后

以上就是饱满太阳为你收集整理的elementUI表单校验问题的全部内容，希望文章能够帮你解决elementUI表单校验问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。