prop中写验证 rules 里面的属性     validator 为自定义验证名      自定义校验 callback 必须被调用

 

验证手机号和电子邮箱

 data() {
      let validatePhone= (rule, value, callback)=>{
        let phoneReg= /^[1][3,4,5,7,8,9][0-9]{9}$/;
        phoneReg.test(value) ? callback() : callback(new Error('请正确填写手机号'));
      };
      let validateMail=(rule, value, callback)=>{
        　var mailReg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
          if(!value){
            //判断不填写时不验证
            callback()
          }else{
            //验证
             mailReg.test(value) ? callback() : callback(new Error('请正确填写电子邮箱'));
          }
      };
   return {
      rules: {
          linkPhone: [{
             validator: validatePhone,
             trigger: "blur"
          }],
          email:[{
             validator: validateMail,
             trigger: "blur"
          }]
        }
      };
  }

 

 

 <el-col :span="12">
            <el-form-item label="联系电话" prop="linkPhone">          
              <el-input v-model="form.linkPhone" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电子邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入电子邮箱" />
            </el-form-item>
 </el-col>