element-ui表单验证

element-ui提供了一套表单验证的方案，可以通过设置rules属性来实现。具体步骤如下：

1. 在表单元素上设置prop属性，该属性值为表单元素的字段名。
2. 在表单元素上设置rules属性，该属性值为一个数组，数组中每个元素都是一个验证规则对象。
3. 验证规则对象包含两个属性：validator和message。validator是一个函数，用于验证表单元素的值是否符合规则；message是一个字符串，用于在验证失败时显示错误信息。

例如，验证一个输入框中的值是否为数字：

<el-form-item label="数字">
  <el-input v-model="number" prop="number" :rules="[{ validator: validateNumber, message: '请输入数字' }]"></el-input>
</el-form-item>

其中，validateNumber函数的实现如下：

methods: {
  validateNumber(rule, value, callback) {
    if (!value) {
      callback(new Error('请输入数字'));
    } else if (!/^\d+$/.test(value)) {
      callback(new Error('请输入整数'));
    } else {
      callback();
    }
  }
}

相关问题

element-ui表单验证不管是否为空失去焦点提示

您可以使用 element-ui 的表单验证规则来实现失去焦点时的提示。具体来说，您可以在表单项中设置 `blur` 触发的验证规则，如下所示：

<el-form-item label="用户名" prop="username">
  <el-input v-model="form.username" placeholder="请输入用户名" @blur="$refs.form.validateField('username')" />
</el-form-item>

在上面的代码中，我们在 `el-input` 组件上监听了 `blur` 事件，并调用了 `$refs.form.validateField('username')` 方法来触发对 `username` 字段的验证。如果该字段未通过验证，则会在表单项下方显示相应的错误提示。

element-ui多选表单验证

针对 element-ui 多选表单验证，可以使用自定义的校验规则，示例代码如下：

<el-form-item prop="selectList" label="多选列表">
  <el-select v-model="selectList" multiple placeholder="请选择">
    <el-option label="选项1" value="1"></el-option>
    <el-option label="选项2" value="2"></el-option>
    <el-option label="选项3" value="3"></el-option>
  </el-select>
  <el-form-item v-for="(item, index) in selectList" :key="index">
    <template #label></template>
    <template #default>
      <span>{{ item }}</span>
    </template>
  </el-form-item>
  <template #error>
    <span style="color: red;">请选择至少一项</span>
  </template>
</el-form-item>

<script>
export default {
  data() {
    return {
      selectList: []
    }
  },
  methods: {
    // 自定义校验规则
    validateSelectList(rule, value, callback) {
      if (value.length === 0) {
        callback(new Error('请选择至少一项'))
      } else {
        callback()
      }
    },
    // 提交表单
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log('表单验证通过')
        } else {
          console.log('表单验证失败')
        }
      })
    }
  },
  mounted() {
    this.$refs.form.validateSelectList = this.validateSelectList
  }
}
</script>

在上述代码中，我们通过 `prop` 属性指定了表单项对应的数据字段，然后在 `validateSelectList` 方法中编写了自定义的校验规则，该方法会被当作表单项对应的校验函数来调用。

然后我们在 `mounted` 钩子函数中将 `validateSelectList` 方法绑定到表单对象上，这样表单项就可以通过 `rules` 属性引用到这个校验函数了。