2026年element-ui中表单验证的三种方式

科技前沿 • 2026-04-23 18:07 • 阅读 0

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。

最近项目中一直使用的element-ui作为前端框架，对于最常使用的表单验证，做出以下总结：

这种方式需要在data()中写入rule{},对于需要校验字段prop中的如visitorName写上验证规则，如下：

data() { return {

 formData: { visitorName: '', cardType: 1, cardCode: '' }, rule: { visitorName: [ { required: true, message: '请输入姓名', trigger: 'blur' }, { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }, { required: true, pattern: /^[一-龥_a-zA-Z0-9.·-]+$/, message: '姓名不支持特殊字符', trigger: 'blur' } ], cardCode: [ { required: true, message: '请输入身份证号', trigger: 'blur' }, { min: 15, max: 18, message: '请如实填写18位号码，以供学校保卫科核对', trigger: 'blur' }, { required: true, pattern: /(^d{15}$)|(^d{18}$)|(^d{17}(d|X|x)$)/, message: '请输入正确的身份证号码', trigger: 'blur' } ] }

} }

其中对于有些需要自定义的校验规则可以作为变量写在data中：

data() {

let reg = /(?!^(d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[w~!@#$%^&*?]{6,12}$/ var validateNewPwd = (rule, value, callback) => else if (this.form.oldPasswd === value) { callback(new Error('新密码与旧密码不可一致！')) } else { callback() } } var validateComfirmPwd = (rule, value, callback) => else if (this.form.newPasswd !== value) { callback(new Error('确认密码与新密码不一致！')) } else { callback() } } return { form: { newPasswd: '', comfirmPwd: '' }, rules: { newPasswd: [ { required: true, message: '请输入新密码', trigger: 'blur' }, { validator: validateNewPwd, trigger: 'blur' } ], comfirmPwd: [ { required: true, message: '请输入确认密码', trigger: 'blur' }, { validator: validateComfirmPwd, trigger: 'blur' } ] } }

}

比较适用于表单全部字段校验或需要校验字段类型比较简单的数据类型

这种方式适用于需要个别检验的字段，或者表单字段有变动的校验；

addPhone() ) }, deletePhone(item) else {

 this.$vux.toast.text('至少保留一个家长亲情号码！') return false }

2026年element-ui中表单验证的三种方式

相关推荐