Element UI Form 表单自动校验出现英文

今天遇到Element UI Form 表单自动校验出现英文，网上搜索说什么不能用el-form-item不能用required。。。。记个笔记防忘记

required 需要配合自定义校验使用，不是自定义校验用了之后会出现英文校验提示，自定义校验不填该属性不会显示前面必填的红色星号，填不填都不会不影响自定义校验功能

1. 是否绑定校验规则
   1.1 检查el-form组件是否绑定
   1.2 检查rules规则是否定义了当前

<el-form ref="form" :model="form" :rules="rules" label-width="80px">

2. prop是否绑定正确
   2.1 检查el-form-item组件是否绑定prop
   2.2 prop的字段需要和验证字段一致

<el-form-item label="姓名" prop="name" required>

3. 检查rules规则
   3.1 触发校验推荐方式
   输入框：'blur'，下拉多选单选：'change'

3.2 message是否填了

rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: ['blur', 'change'] }
        ],
        mobile: [
          { validator: validateMobile, trigger: ['blur', 'change'] }
        ]
}

完整代码：

<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
    </el-form-item>
    <el-form-item label="手机号码" prop="mobile" required>
      <el-input v-model="form.mobile" placeholder="请输入手机号码"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')"
        >立即创建</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "FormRuleValidate",
  data() {
    const validateMobile = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      }
      // 校验手机号规则
      // 校验成功需要调用callback()
      callback();
    };
    return {
      form: {
        name: "",
        mobile: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: ["blur", "change"],
          },
        ],
        mobile: [{ validator: validateMobile, trigger: ["blur", "change"] }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>