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

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

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

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 }],

});