element-ui 表单必填项和表单验证方式解析，以及表单验证规则

（一）表单必填项

需求：表单里必填项需要有红色星号标识，当未填写时显示中文提示语
思路：表单项里写required
问题：当表单项的验证规则绑定为blur事件时，表单项内元素清空后，会提示“xx is required”，其中xx是绑定的prop值。
解决办法：在表单项里模拟红色星号的样式，去掉required，写class=“is-required”,必填的限制在绑定的rules里写。

（二）表单验证方式解析

<el-form :model="form" :rules="rules" ref="form" class="form-inline" >
</el-form>

• model：表单控件绑定的数据对象，在校验或重置时会访问该数据对象下对应的表单数据，类型为 Object。
• rules：表单验证规则，即上面介绍的 async-validator 所使用的校验规则，类型为 Object。
• ref必须加，还得和model一样

<el-form-item prop="email" label="邮箱">
    <el-input v-model="form.email"></el-input>    
</el-form-item>

el-form-item 里面的prop是rules里面对应的名称的验证内容，而验证的就是v-model里面的值存不存在

在点击保存按钮时（@click="handleOk('form')），进行验证

handleOk(formName) {
  this.$refs[formName].validate((valid) => {
    if (valid) {
      // 表单验证通过之后的操作
    } else {
      console.log('error submit!!');
      return false;
    }
  });
},

（三）表单验证规则

rules: {
  email: [{ required: true,validator: checkEmail, trigger: "blur" }],
  user_name: [{ required: true, message: "请输入电话号码", trigger: "blur" }],
}

自定义验证规则：

data() {
  let checkEmail = (rule, value, callback) => {
    //邮箱正则
    var reg = 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(new Error("邮箱地址不能为空"));
    } else if (!reg.test(value)) {
      callback(new Error("请输入正确的邮箱地址"));
    } else {
      callback();
    }
  };
},