vue2.X+elementUI表单自定义验证
<template> <div class="taxi-appointment-dairen"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <div class="dairen-input"> <el-form-item> <el-input v-model="ruleForm.name" placeholder="请输入乘车人姓名(选填)"> </el-input> </el-form-item> <i class="fa fa-user fa-2x"></i> </div> <div class="dairen-input"> <el-form-item prop="number"> <el-input v-model="ruleForm.number" placeholder="请输入乘车人手机号码"> </el-input> </el-form-item> <i class="fa fa-mobile-phone fa-2x"></i> </div> <div class="popover-btn"> <el-button @click="submitForm('ruleForm')" type="primary">确定</el-button> </div> </el-form> </div> </template>
<script> export default { data () { var ruleNumber = (rule, value, callback) => { var myreg = /^[1][3,4,5,7,8][0-9]{9}$/; if (value === '') { callback(new Error('请输入乘车人手机号码')); } else if(!myreg.test(value)) { callback(new Error('请输入正确乘车人手机号码')); }else { callback(); //重点在这 如果在验证通过后不添加callback()函数在验证时是条件会为false } }; return { ruleForm: { name: '', number: '' }, rules: { number: [{ validator: ruleNumber, trigger: 'blur' }] } } }, methods: { submitForm (formName) { this.$refs[formName].validate((valid) => { if (valid) { //在验证通过时时不返回callback()时 这一步进不来 console.log(valid) } else { return false } }); } } } </script>