el-form 自定义校验规则_el-form自定义校验规则

    //自定义校验规则
    var checkIdCard = (rule, value, cb) => {
      const regIdCard = /^[0-9A-Za-z]+$/;

      if (regIdCard.test(value)) {
        return cb();
      }

      cb(new Error('只能输入数字或字母'));
    };
1
2
3
4
5
6
7
8
9
10

    datacode: [
          { required: true, message: '请输入指标编码', trigger: 'blur' },
          { validator: checkIdCard, trigger: 'blur' },
        ],
1
2
3
4

------------------------------------------手动分割-------------------------------------------------------------------

在 Element UI 中的 el-form 组件中，可以通过自定义校验规则来进行表单验证。以下是一个示例，展示了如何在 el-form 中添加自定义的校验规则：

首先，在 Vue 的 data 中定义一个名为 rules 的对象，用于存储校验规则。校验规则以表单项的字段名作为 key，以数组的形式存储一个或多个校验规则。

data() {
  return {
    form: {
      name: '', // 表单项名称
      age: null, // 表单项年龄
    },
    rules: {
      name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, max: 10, message: '姓名长度在2到10个字符之间', trigger: 'blur' }
      ],
      age: [
        { required: true, message: '请输入年龄', trigger: 'blur' },
        { type: 'number', message: '年龄必须为数字', trigger: 'blur' },
        { validator: this.checkAge, trigger: 'blur' }
      ]
    }
  };
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在 methods 中定义一个名为 checkAge 的校验函数，该函数接收三个参数：rule、value 和 callback。其中，rule 是当前校验的规则，value 是当前校验的值，callback 是回调函数，在校验完成后使用它来返回校验结果。

methods: {
  checkAge(rule, value, callback) {
    if (value < 0 || value > 150) {
      callback(new Error('年龄必须在0到150之间'));
    } else {
      callback();
    }
  }
},
 checkNum(rule, value, callback) {
      const positiveRegex = /^(?!0+(\.0+)?$)\d{1,13}(\.\d{1,4})?$/;
      if (!positiveRegex.test(value)) {
        callback(new Error("资金必须大于0,并且最多保留4位小数"));
      } else {
        callback();
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在 el-form-item 中使用 :rules 属性将对应的校验规则应用到表单项上。

<el-form :model="form" :rules="rules"></el-form>
  <el-form-item label="姓名" prop="name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input-number v-model="form.age"></el-input-number>
  </el-form-item>
</el-form>
1
2
3
4
5
6
7
8
9

通过以上步骤，你可以在 el-form 组件中使用自定义的校验规则进行表单验证。校验规则可以包括内置的验证规则（如 required、min、max 等），也可以自定义 validator 规则来执行更复杂的校验逻辑。