最近项目中一直使用的元素用户界面作为前端框架，对于最常使用的表单验证，做出以下总结：

第一种常用方式：表单上加规则{对象}

el型类=' apply-form first-form ' : model=' form data ' : rules=' rule ' ref=' form ' El-form-item label='姓名prop='访问者名称' El-input v-model=' formdata。“访客姓名”占位符='请输入姓名'可清除/El-输入/El-表单-项目埃尔-表单-项目标签='身份证号prop='卡代码' El-输入v-model=' formdata。卡代码' :最大长度=' 18 '占位符='请输入身份证号可清除/El-输入/El-表单-项目/El-表单这种方式需要在数据()中写入规则{},对于需要校验字段支柱中的如visitorName写上验证规则，如下：

data(){ return { form data : { visitor name : ' '，cardType: 1，cardCode: '' }，rule : { visitor name : [{ required d : true，message: '请输入姓名，trigger: 'blur' }，{ min: 2，max: 10，message: '长度在2到10 个字符，trigger:“模糊”}，{ required: true，pattern : /^[u4e00-u9fa5_a-za-z0-9.-] $/,消息： '姓名不支持特殊字符，trigger: 'blur' } ]，cardcode :[{必需： 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() { let reg=/(？^(d | |[[emailprotected]#$%^*？] )$)^[[emailprotected]#$%^*？]{6，12}$/var validateNewPwd=(规则、值、回调)={ if(！reg.test(值)){回调（新错误('密码应是6-12位数字、字母或字符!'))} else if (this.form.oldPasswd===值){回调(新错误('新密码与旧密码不可一致!'))} else { callback()} } var validateComfirmPwd=(规则、值、回调)={ if(！reg.test(值)){回调（新错误('密码应是6-12位数字、字母或字符!'))} else if (this.form.newPasswd！==值){回调（新错误('确认密码与新密码不一致!'))} else { callback()} }返回{ form : { new passwd : ' '，comfirmPwd: '' }，规则3360 { new passwd : [{ required : true，message: '请输入新密码，trigger: 'blur' }，{ validator: validateNewPwd，trigger: 'blur' } ]，comfirmpwd :[{必需3360 true，message: '请输入确认密码，trigger: 'blur' }，validateComfirmPwd，trigger: 'blur' } ] } }比较适用于表单全部字段校验或需要校验字段类型比较简单的数据类型

第二种方式：在电子表格项目单个添加

El-form项目标签='电话号码class=' El-form-item-small-has-error ' : prop=' PhoneNum ' : rules='[{ required : true，message: '请输入电话号码，trigger: 'blur' }，{ required: true，pattern : /^((13|14|15|16|17|18)[0-9]{1}d{8})|((166|199|198)[0-9]{1}d{7})$/,message: '请输入正确的电话号码，触发器： '模糊' }]' El-input v-model=' v . phone num ' :最大长度=' 11 '占位符可清除/El-输入/El-表单-项目这种方式适用于需要个别检验的字段，或者表单字段有变动的校验；

第三种方式：动态增减表单项

先看需求效果图

对应的数据结构：

对应删除增加表单项的操作为：

addPhone(){ let len=this . formdata . phoneinfolist . length this。$ set(this.formData.phoneInfoList，len，{ relationship :[]，phoneNum: ' '，relationType: 0，schoolid : this . selecteduser . schoolid，user code : this . selecteduser . user code })}，Delete phone(item){ if(this . form data . phone infolist . length 1){//的意思是先获取这个元素的下标，然后根据这个下标计算，再删除元素this . form data . phone infolist。} else {this。$vux.toast.text('至少保留一个父母的家庭号码！')返回false }}，这样的规则和prop不能直接对应表单模式绑定的对象上的属性，所以这里我们要在待验证字段所在的数据中循环找到索引，然后以字符串拼接的方式连接验证字段名：

呈现的html是：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。