vue中使用element-ui自定义表单验证

template

<el-form ref="dataform" :rules="rules" :model="dataform" label-width="300px">    
	<el-form-item label="电话" prop="phone">
		<el-input class="inp" v-model="dataform.phone" auto-complete="true"></el-input>
	</el-form-item>
</el-form>

script

<script>
export default {
  data() {
    // 此处自定义校验手机号码js逻辑
    var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
    var validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('号码不能为空'))
      }
      setTimeout(() => {
        if (!phoneReg.test(value)) {
          callback(new Error('格式有误'))
        } else {
          callback()
        }
      }, 1000)
    }
    return {
      dataform: {    
        phone: '',
      },
      // 校验规则
      rules: {
        // 校验手机号码，主要通过validator来指定验证器名称
        phone: [{ required: true, validator: validatePhone, trigger: 'blur' }]
      },
    }
  }
}
</script>

以上是官方提供的自定义验证方法
我朋友告诉了我一个神仙方法，直接在rules里面使用pattern属性写正则表达式

rules: {
	phone: [
		{ required: true, message: '号码不能为空', trigger: 'blur' }，
		{	
			pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
			message: '格式不正确',
			trigger: 'blur'
		}
	]
}