前端如何使用自定义校验规则

需求：在我们日常开发中，会遇到一些表单项验证，一些常规的校验满足不了我们的需求，这时我们就用到了自定义规则。

需求一：校验只能输入纯数字格式，代码如下：

1表单代码

 <el-form-item prop="interval">

                <el-input

                  v-model.trim="Form.value"

                  clearable

                  placeholder="请输入过滤值,如:100"

                />

    </el-form-item>

2.规则校验

const labelRule = (rule, value, callback) => {

  if (value === '') {

    callback();

  } else {

    const reg = /^\+?[0-9]\d*$/;

    if (reg.test(highForm.value)) {

      callback();

    } else {

      callback(new Error('请输入正确的数字格式,如:10'));

    }

  }

};

3.触发条件

const rules = reactive({

  interval: [{ trigger: 'blur', validator: labelRule }],

});