1. 前言
在我们日常开发中，表单验证是必不可少的。ElementUI作为一款流行的UI框架，其提供的表单验证功能简单易用。但是在使用过程中，仍然会遇到一些问题，下面将分享一下ElementUI表单验证的踩坑解决方法。
2. 表单验证
ElementUI表单验证提供了多种验证方式，包括必填项，格式验证等。下面是一个简单的例子：
<template>
<el-form :model="form" :rules="rules">
<el-form-item label="用户名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
password: ''
},
rules: {
name: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
};
</script>
在上述例子中，我们使用了rules属性来定义验证规则，传入一个对象，以输入框的v-model绑定的属性名作为键，一组验证规则作为值。例如：name: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }]。
在提交表单时，我们使用$refs属性来获取到表单对象，通过调用其validate方法进行表单验证。
2.1 必填项验证
必填项验证是表单验证的基础，使用如下方式进行设置：
{
required: true,
message: '请输入内容',
trigger: 'blur'
}
其中：required表示是否必填；message表示错误提示信息；trigger表示验证触发的时机，比如blur表示当失去焦点时触发验证。
2.2 格式验证
ElementUI提供了多种格式验证方式，常用的有验证邮箱和验证手机号码。以验证邮箱为例，使用如下方式进行设置：
{
type: 'email',
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change']
}
其中：type表示验证类型；message表示错误提示信息；trigger表示验证触发的时机，可以指定多个时机。
2.3 表单联动验证
在表单联动中，我们需要设置一个依赖项，以此来确定依赖项的值是否影响到了当前验证项的值，从而改变验证规则。例如，当邮箱地址输入错误时，电话号码就需要验证，当手机输入错误时，邮箱就需要验证。使用示例如下：
{
validator: (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入邮箱地址或手机号码'));
} else {
if (this.form.email !== '' && this.form.phone !== '') {
this.$refs.form.validateField('email');
this.$refs.form.validateField('phone');
}
callback();
}
},
trigger: 'blur'
}
其中，validator表示自定义验证方法，callback用于返回结果。在验证方法中，我们可以根据依赖项是否有值进行验证，并通过调用validateField方法来进行表单联动验证。
3. 踩坑解决方法
3.1 表单清空后验证仍然生效问题
在表单清空后，原本需要验证的字段仍然会显示错误提示信息。这是由于在表单重置时，表单验证状态并没有清空。解决方法是在重置表单之前调用clearValidate方法清空验证状态，示例如下：
reset() {
this.$refs.form.resetFields();
this.$nextTick(() => {
this.$refs.form.clearValidate();
});
}
3.2 表单样式问题
在表单验证失败时，表单左侧会出现红色感叹号，但是并没有明显的样式标记，导致效果不太明显。解决方法是给表单添加一个status-icon属性，例如：
<el-form :model="form" :rules="rules" status-icon>
3.3 异步验证问题
在进行异步表单验证时，我们需要等待异步操作完成后才能判断验证结果。此时需要在异步操作结束后再次调用validate方法。示例如下：
{
validator: (rule, value, callback) => {
setTimeout(() => {
if (value === 'test') {
callback(new Error('用户名已存在'));
} else {
callback();
}
}, 1000);
},
trigger: 'blur'
}
在使用如上异步验证规则时，如果直接点击提交按钮，则会出现验证结果错误。解决方法是在点击提交按钮时，先手动调用一次validate方法进行验证，然后再执行异步操作。示例如下：
submitForm() {
this.$refs['form'].validate(valid => {
if (valid) {
let promise = new Promise((resolve, reject) => {
setTimeout(() => {
if (this.form.username === 'test') {
reject('用户名已存在');
} else {
resolve();
}
}, 1000);
});
promise.then(() => {
alert('验证通过');
}).catch(msg => {
this.$refs['form'].validateField('username', msg);
});
}
});
}
3.4 动态改变验证规则问题
在表单联动时，当需要动态设置验证规则时，我们需要调用validateField方法来更新验证规则，然而有时候会发现更新后无效，这是因为我们需要传入一个真正的触发时机，如下所示：
this.$refs.form.validateField('email', err => {
if (err) {
console.log(err);
}
}, { type: 'change' });
在调用validateField方法时，我们需要传入额外的选项对象，其中type属性表示触发的时机，如上面例子中为change。否则，即便已经更新了验证规则，也无法生效。
3.5 自定义提示信息问题
ElementUI提供的错误提示信息可能难以满足实际需求，因此我们需要自定义提示信息。常见的做法是给表单元素添加一个error属性，在error属性中定义错误提示信息。示例如下：
<el-form-item label="用户名" prop="name" :error="nameError">
<el-input v-model="form.name"></el-input>
</el-form-item>
其中，nameError为自动计算属性，如下所示：
computed: {
nameError() {
return this.$refs['form'].fields.name && this.$refs['form'].fields.name.dirty && this.$refs['form'].fields.name.invalid ? '用户名格式错误' : '';
}
}
在自动计算属性中，我们通过访问表单对象来获取到当前字段的验证状态，并根据状态来返回不同的错误提示信息。
4. 总结
ElementUI表单验证提供了多种验证方式，使用方便。在使用过程中，我们需要注意清空验证状态、设置表单样式、异步验证、动态改变验证规则、自定义提示信息等问题。
在开发中，表单验证是一个必不可缺的环节。掌握好ElementUI表单验证的使用方法，能够提高开发效率。