Vue表单校验总结 vue element-ui的form表单校验总结，动态校验、自定义校验（用正则校验手机号码、数字、url、中文）正常添加校验流程，在form表单加rule只想对单个input校验自定义校验（例如用正则校验手机号码、数字、url、中文等）添加动态校验（可以根据需要显示校验或者改变校验规则）遇到校验无效的问题### 正常添加校验流程，在form表单加rule在el-form里面添加 :rules=“rules”在el-form-item里面添加prop，prop对应:model="form"的form的属性然后在data里面添加属性rules<el-form ref="form" :model="form" :rules='rules' label-width="80px" label-position="top"> <el-form-item label="活动名称" prop="name"> <el-input v-model="form.name" class="changdu" ></el-input> </el-form-item> data(){ return{ form:{ name:'', region:'', date1:'', date2:'', delivery:false, type:[], resource:'', desc:'', }, rules:{ name: [ { required:true,message:'请不要留空',trigger: 'blur'}, { validator:function(rule,value,callback){ if(/^[0-9]*$/.test(value) == false){ callback(new Error("输入的不是数字")); }else{ callback(); } }, trigger: 'blur'}, ],对单个input校验有时候并不想在form增加rules校验，只想对单个input增加校验,直接在el-form-item里面加rules<el-form-item label="开始日期" :rules="{ required: true, message: '开始日期不能为空', trigger: 'blur' }"> <el-date-picker v-model="form.startTime" type="date" placeholder="开始日期"> <i slot="suffix" class="el-input__icon el-icon-date"></i> </el-date-picker> </el-form-item>自定义校验（正则校验手机号码、数字、url、中文）提供几个用正则表达式做的自定义校验规则demodata() { return { //在rules属性填写相关字段的校验规则 rules: { username: [ { required: true, message: "必填" }, { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' } ], email:[{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'change' }], //自定义校验 name:[ { required: true, message: '请输入姓名', trigger: 'blur' }, { validator:function(rule,value,callback){ //校验中文的正则：/^[\u4e00-\u9fa5]{0,}$/ if(/^[\u4e00-\u9fa5]{0,}$/.test(value) == false){ callback(new Error("请输入中文")); }else{ //校验通过 callback(); } }, trigger: 'blur' }, ], phone:[ { required: true, message: '请输入手机号码', trigger: 'blur' }, { validator:function(rule,value,callback){ if(/^1[34578]\d{9}$/.test(value) == false){ callback(new Error("请输入正确的手机号")); }else{ callback(); } }, trigger: 'blur' }, ], age:[ { validator:function(rule,value,callback){ if(/^[0-9]*$/.test(value) == false){ callback(new Error("请输入正确的数字")); }else{ callback(); } }, trigger: 'blur' }, ], url:[ { validator:function(rule,value,callback){ if(/^http:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/.test(value) == false){ callback(new Error("请输入正确的Url")); }else{ callback(); } }, trigger: 'blur' }, ], } } }添加动态校验（可以根据需要显示校验或者改变校验规则）遇到过一种，根据form表单的一个下拉列表的选项来判断某些字段是否校验，选了A,要校验几个字段必填，选了B又要校验其他几个字段必填，这时候表单的校验需要动态添加，这时候我们需要动态改变rules属性相关的校验即可例如刚刚这种根据下拉列表的选项来动态触发校验的，那么在el-select里面加@change事件，每次下拉列表改变就触发事件来改变form表单的校验规则data() { return { //在rules属性填写相关字段的校验规则 rules: { phone: [{ required: true, message: "必填" }], email:[{ required: true, message: "必填" }], } } }, methods: { //改变状态时动态重置校验规则 resetValidate(){ if(this.form.status== 1){ //重置rules的phone、email的属性值，只校验手机，不校验邮箱 this.rules.phone= [{ required: true, message: "必填" }]; this.rules.email= []; }else{ //只校验邮箱，不校验手机 this.rules.phone= []; this.rules.email= [{ required: true, message: "必填" }]; } this.$refs.form.clearValidate(); },遇到校验无效的问题有一次遇到一个校验无效的问题，from表单其他字段校验都有效，就是有一个el-date-picker的校验一直没有效果，检查发现在el-form-item里面添加prop，prop对应:model="form"的form的属性并不是当前form里面的属性值.，所以这个el-date-picker没有触发校验<el-form :model="form" :rules="rules" ref="form"> <el-form-item label="用户名称：" prop="username"> <el-input v-model="form.username" clearable :disabled="true"></el-input> </el-form-item> ..... </el-form> // 1.里面的el-input绑定的username必须是:model="form"的form里面的属性 // 2.并且el-form-item的prop=username，才会校验生效，否则在element-ui会没有校验效果