vue element-ui使用required进行表单校验时自定义提示语问题

在Vue中使用Element-UI进行表单校验时，可以使用required属性来进行必填校验。然而，在默认情况下，当该表单项未填写时，Element-UI会输出“该字段不能为空”的默认提示语，而有时候我们希望自定义提示语。下面是自定义提示语的攻略：

1. 使用label属性自定义提示语

如果我们不想使用默认提示语，可以使用label属性来自定义提示语。在使用label属性时，必须确保该属性的值与input标签的name属性和rules属性中的属性名一致。例如：

<template>
  <el-form :model="form" ref="form" :rules="rules">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: ''
      },
      rules: {
        username: [{ required: true, message: '请填写用户名' }]
      }
    }
  }
}
</script>

在上面的代码中，我们在el-form-item中的label属性中定义了“用户名”作为提示语，并在rules属性中为username属性定义了一个自定义提示语“请填写用户名”，这样在表单项未填写时，提示语就会变成我们所定义的自定义提示语。

1. 使用validator函数自定义提示语

除了使用label属性外，我们还可以使用validator函数来自定义提示语。当使用validator函数时，可以在validator的返回值中设置错误消息，例如：

<template>
  <el-form :model="form" ref="form">
    <el-form-item label="手机号" prop="mobile">
      <el-input v-model="form.mobile" @blur="checkPhone"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        mobile: ''
      }
    }
  },
  methods: {
    checkPhone(rule, value, callback) {
      const reg = /^1[3456789]\d{9}$/
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else if (!reg.test(value)) {
        callback(new Error('手机号码格式不正确'))
      } else {
        callback()
      }
    }
  }
}
</script>

在上面的代码中，我们定义了一个checkPhone方法，该方法接收rule、value和callback三个参数。在该方法中，我们首先判断value是否为空，如果为空，则通过callback函数返回一个“请输入手机号”的错误提示；否则使用正则表达式对value进行验证，如果验证不通过，则通过callback函数返回一个“手机号码格式不正确”的错误提示；如果验证通过，则通过callback返回一个空值，说明验证通过。

通过上面两个示例，我们可以看到，在Vue中使用Element-UI进行表单校验时，自定义提示语非常简单。使用label属性和validator函数都可以实现自定义提示语的功能。