element 表单校验

邮箱格式手机身份证位数表单校验

<el-form :inline="true" ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="手机号" prop="phone">
          <el-input v-model.number="form.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" type="email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="身份证" prop="idCard">
          <el-input v-model="form.idCard" placeholder="请输入身份证" />
        </el-form-item>
</<el-form>    

data() {
    var validateEmail = (rule,value,callback)=>{
      const regEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      if(value != null && value != ""){
        if(regEmail.test(value)){
          return callback();
        }
        callback('请输入正确邮箱')
      }
    }
    var validatePhone = (rule,value,callback) => {
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
      if(value != null && value != ""){
        if (regMobile.test(value)) {
          return callback();
        }
        callback(new Error("请输入合法的手机号"));
      }
    }
    var validateIdCard = (rule,value,callback) => {
      const regIdCard = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/;
      if(value != null && value != ""){
        if (regIdCard.test(value)) {
          return callback();
        }
        callback(new Error("请输入合法的身份证"));
      }
    }
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        email: [
            { validator: validateEmail, trigger: 'blur' }
          ],
        phone:[
          { validator:validatePhone,trigger:'blur' }
        ],
        // 身份证 
        idCard:[
          { required: true, message: '请输入身份证号码', trigger: 'blur' },
          { validator:validateIdCard, trigger: 'blur' },
        ],
      }
    };
  },