最近的项目中使用了Element-ui作为前端框架。对于最常用的表单验证，做如下总结：第一种常用方法：添加规则{object}这个方法需要在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'}，{要求红色：正确，模式：/^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/，消息：'名称不支持特殊字符'，触发器：'blur'}]，cardCode：[{required:true,message:'请输入身份证号码',trigger:'blur'},{min:15,max:18,message:'请如实填写18位号码，以供校保部门核实',trigger:'blur'},{required:true,模式：/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,message:'请输入正确的身份证号码',trigger:'blur'}]}}}其中，一些需要自定义的验证规则可以写成data中的变量：data(){让reg=/(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{6,12}$/varvalidateNewPwd=(rule,value,callback)=>{if(!reg.test(value)){callback(newError('密码应该是6-12位数字，字母或者字符！'))}elseif(this.form.oldPasswd===value){callback(newError('新密码不能与旧密码一致！'))}else{callback()}}varvalidateCommfirmPwd=(rule,value,callback)=>{if(!reg.test(value)){callback(newError('密码应为6-12位数字、字母或字符!'))}elseif(this.form.newPasswd!==value){callback(newError('确认密码与新密码不匹配！'))}else{callback()}}return{form:{newPasswd:'',comfirmPwd:''},rules:{newPasswd:[{required:true,message:'请输入新密码',trigger:'blur'},{validator:validateNewPwd,trigger:'blur'}],comfirmPwd:[{required:true,message:'请输入确认密码',trigger:'blur'},{validator:validateCommfirmPwd,trigger:'blur'}]}}}比较适用于所有字段formorrequiresvalidation字段类型为比较简单的数据类型方法二：在el中添加该方法适用于需要单独检查的字段.或者有表单域变化的验证；第三种方法：动态增减表单项先看需求效果图对应的数据结构：删除和添加表单项对应的操作是：addPhone(){letlen=this.formData.phoneInfoList.lengththis.$set(this.formData.phoneInfoList,len,{relation:[],phoneNum:'',relationType:0,schoolId:this.selectedUser.schoolId,userCode:this.selectedUser.userCode})},deletePhone(item){if(this.formData.phoneInfoList.length>1){//表示先获取该元素的下标，然后从该下标开始计算，删除长度为1的元素this.formData.phoneInfoList.splice(this.formData.phoneInfoList.indexOf(item),1);}else{this.$vux.toast.text('保留至少一个父母的家庭号码！')returnfalse}}，这样的规则和prop直接写入并没有对应到表单模式绑定的对象上的属性，所以这里需要用一个循环在数据中找到待校验字段所在的索引，然后连接待校验字段的名称通过字符串连接验证：呈现的html是：
