<el-form ref="perfectInfo"   :model="perfectData" //所有form表单中的值全放到此JSON中 label-width="90px"  :rules="rulesPerfectData" //定义校验规则class="page-form secondForm"><el-form-item prop="realName" label="真实姓名"><el-input v-model="perfectData.realName" placeholder="请输入真实姓名"></el-input></el-form-item><el-form-item style="margin-left:-80px;" class="confirmBtn"><el-button @click="perfectInformation" type="success" style="width:100%;">确认激活</el-button></el-form-item>
</el-form>

js部分：

<script>export default{data(){//定义自定义表单验证，else必须callback()否则点击确认执行按钮无法校验拦截，会直接进 //入下一步var checkName=(rule,value,callback)=>{let nameZz= /^[a-zA-Z\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;if(!value){return callback(new Error('姓名不能为空'));}else if(!nameZz.test(value)){return callback(new Error('姓名格式不正确'))}else{callback();}};return{perfectData:{realName:''},//执行校验rulesPerfectData:{realName:[//此写法是执行上面定义的校验规则{required:true,validator:checkName,trigger:'blur'}，//此写法默认校验值不能为空{required:true,message:'姓名不能为空',trigger:'blur'}]}},methods:{perfectInformation(){this.$refs[perfectInfo'].validate(async (valid)=>{if(valid){//校验通过valid为trueconsole.log(‘校验通过’);}})}}  }
</script>