详解element-ui 表单校验 Rules 配置 常用黑科技

详解element-ui 表单校验 Rules 配置 常用黑科技

在Element-UI表单组件中，我们可以很方便地使用校验规则来验证用户输入的数据，以保证数据的合法性。下面我们将详细讲解如何在Element-UI表单组件中使用校验规则。

绑定校验规则

我们可以通过设置rules属性来绑定校验规则。例如下面的代码，绑定了一个名为name的校验规则：

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

data() {
  return {
    form: {
      name: ''
    },
    rules: {
      name: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
      ]
    }
  }
}

在rules中，我们定义了一个名为name的校验规则，包含了两条校验规则。required表示输入不能为空，min和max表示输入长度在指定范围内。message表示错误提示信息，trigger表示触发校验的事件。

表单的校验方法

要对表单进行校验，我们需要使用validate方法。例如下面的代码，在点击提交按钮时，调用了validate方法对表单进行校验：

<el-form ref="form" :model="form">
  <!-- ... -->
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>

methods: {
  submitForm() {
    this.$refs.form.validate((valid) => {
      if (valid) {
        // 校验成功后的操作
      } else {
        // 校验失败后的操作
      }
    });
  }
}

在validate方法中，我们传入了一个回调函数，并在该函数中根据校验结果做出相应的操作。

示例1：自定义校验规则

在前面的示例中，我们使用了Element-UI提供的校验规则。但是有些时候，我们可能需要自定义一些校验规则。例如下面的代码，自定义了一个名为gender的校验规则：

<el-form ref="form" :model="form">
  <el-form-item label="称呼" prop="title">
    <el-input v-model="form.title"></el-input>
  </el-form-item>
  <el-form-item label="性别" prop="gender">
    <el-radio-group v-model="form.gender">
      <el-radio :label="1">男</el-radio>
      <el-radio :label="2">女</el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>

data() {
  return {
    form: {
      title: '',
      gender: '',
    },
    rules: {
      title: [
        { required: true, message: '请输入称呼', trigger: 'blur' }
      ],
      gender: [
        { validator: this.checkGender, trigger: 'change' }
      ]
    }
  }
},
methods: {
  checkGender(rule, value, callback) {
    if (value === 1 || value === 2) {
      callback();
    } else {
      callback(new Error('请选择性别'));
    }
  }
}

在rules中，我们定义了一个名为gender的校验规则。与前面示例不同的是，这里的规则的validator属性设置为一个函数checkGender，表示使用自定义的校验函数。当checkGender函数返回一个错误时，表示校验失败。

示例2：根据其他字段动态设置校验规则

有时候我们需要根据用户的输入动态地设置校验规则。例如下面的代码，根据用户选择的爱好数量，动态地设置校验规则：

<el-form ref="form" :model="form">
  <el-form-item label="爱好">
    <el-checkbox-group v-model="form.hobbies">
      <el-checkbox :label="1">篮球</el-checkbox>
      <el-checkbox :label="2">足球</el-checkbox>
      <el-checkbox :label="3">羽毛球</el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="自我介绍">
    <el-input v-model="form.introduction"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>

data() {
  return {
    form: {
      hobbies: [],
      introduction: '',
    },
    rules: {
      introduction: [
        { required: true, message: '请输入自我介绍', trigger: 'blur' }
      ]
    }
  }
},
watch: {
  'form.hobbies'(newVal) {
    const len = newVal.length;
    const maxLen = 3;
    const rules = [
      { required: true, message: '请选择爱好', trigger: 'change' }
    ];
    if (len > 0) {
      rules.push({ 
        validator: (rule, value, callback) => {
          const valLen = value.length;
          if (valLen <= 100) {
            callback();
          } else {
            callback(new Error('自我介绍不能超过100个字符'));
          }
        },
        trigger: 'blur'
      });
    }
    if (len >= maxLen) {
      rules.push({ message: '最多只能选择' + maxLen + '个爱好', trigger: 'change' });
    }
    this.$set(this.rules, 'introduction', rules);
  }
}

在rules中，我们定义了一个名为introduction的校验规则，初始值为一个必填校验规则。我们使用了watch函数来实时监听用户选择的爱好，根据选择的爱好数量来动态地设置校验规则。例如当选择了至少一个爱好时，将添加一个校验自我介绍长度不能超过100个字符的校验规则，当选择的爱好数量达到3个时，将添加一个提示用户最多只能选择3个爱好的校验规则。使用$set方法来更新rules属性的值，以确保动态添加的校验规则能够生效。

以上就是关于Element-UI表单校验规则的详解，希望对大家有所帮助！