一、为表单添加验证规则
通过在表单元素上绑定rules属性，可以为表单添加验证规则。
<el-form-item label="用户名" prop="name">
<el-input v-model="form.name" name="name" :rules="[ { required: true, message: '请输入用户名', trigger: 'blur' }]" />
</el-form-item>
上述代码中prop属性的值为表单元素的字段名，rules属性的值为对该字段的验证规则。在这个例子中，必填的验证规则为required，提示信息为“请输入用户名”，验证触发方式为blur即失去焦点触发。还可以设置其它的验证规则，如最小长度、最大长度、正则表达式等等。
二、动态修改验证规则
Element提供了一组hook属性，可以让我们在验证过程中进行一些动态的修改行为。这些hook分别是validator、validate、validateFailed。
validator：在表单值发生变化时触发，可以动态设置表单的验证规则。
<el-form-item label="手机号" prop="tel">
<el-input v-model="form.tel" name="tel" :rules="[ { required: true, message: '请输入手机号', trigger: 'blur' }]" @blur="checkPhone" />
</el-form-item>
methods: {
checkPhone() {
if(/^(13[0-9]|14[5-9]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[89])\d{8}$/.test(this.form.tel)) {
this.$refs.form.validateField('tel');
} else {
this.$refs.form.validateField('tel', '手机号格式不正确');
}
}
}
在这个例子中，我们为手机号添加了一个额外的验证方法checkPhone。如果手机号不符合格式，我们可以通过调用validateField方法动态设置一个错误信息，这样就可以避免弹出一个不必要的提示框。
三、自定义验证规则
如果Element提供的验证规则不能够满足我们的需求，我们可以通过自定义验证规则来满足我们的需求。
Vue.component('el-phone', {
template: '<el-input v-model="value" :placeholder="placeholder" :readonly="readonly" :disabled="disabled" :maxlength="maxlength" @change="handleChange" />',
props: {
value: { type: String, default: '' },
placeholder: { type: String, default: '请输入电话号码' },
readonly: { type: Boolean, default: false },
disabled: { type: Boolean, default: false },
maxlength: { type: Number, default: 11 },
},
methods: {
handleChange(e) {
const value = e.target.value;
if(!/^(13[0-9]|14[5-9]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[89])\d{8}$/.test(value)) {
this.$emit('input', '');
this.$emit('error', '请输入有效的手机号码');
} else {
this.$emit('input', value);
this.$emit('success', value);
}
}
}
});
在这个例子中，我们新增了一个名为el-phone的自定义组件。在handleChange方法里，我们使用了和前面介绍的动态验证相同的方式，动态设置验证结果。要使用这个组件，只需要在表单中绑定value属性即可。
四、错误提示
Element提供了一套强大的错误提示机制，可以让我们在表单出错时及时发现问题，并提示出错的原因。
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="手机号码" prop="phone">
<el-input v-model="form.phone" name="phone" placeholder="请输入手机号码" @blur="checkPhone" />
</el-form-item>
<el-form-item label="验证码" prop="code">
<el-input v-model="form.code" name="code" placeholder="请输入验证码" />
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="submitting" @click="submit">提交
在这个例子中，我们可以看到一个名为error的slot。在普通情况下，它是不会显示的，只有在表单验证不通过时，我们才会在这里显示错误信息。使用Element提供的querySelector方法，可以迅速地找到错误提示框。
五、图形验证码验证
图形验证码是一种常见的用户验证方式，也是表单验证方案中常见的一种方案。可以通过Element提供的el-image组件快速实现图形验证码的验证功能。
<el-form-item label="图形验证码" prop="imageCode">
<el-input v-model="form.imageCode" name="imageCode" placeholder="请输入验证码" />
<el-image src="/api/randCode.php" style="width: 100px;height: 40px;margin-left: 1rem;" @click.native="changeRandCode" :key="randCode" />
</el-form-item>
在这个例子中，我们可以看到一组图形验证码的实现方式。在点击验证码时，我们会刷新一个新的验证码，从而完成验证的过程。
六、总结
通过本文的介绍，我们可以看到Element是一个非常棒的表单组件库，为我们提供了无数的组件和接口，可以让我们完成各种各样的表单验证任务。希望本文对读者有所帮助，也希望读者们在开发中能够加以应用。
