Antd-rules-自定义校验规则-Toy模板网

这篇具有很好参考价值的文章主要介绍了Antd-rules-自定义校验规则。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

公司UI出了一个表单提交的规则校验效果
需要自定义rules才可以实现
只要输入错误就提示红色边框并且不可以提交
如何实现？
Antd-rules-自定义校验规则

##解决
antd官方给了案例自定义校验规则
实现如下：
1，需要自定义rules
2，自定义validator
3，填写你的规则方法

1，需要自定义rules

<a-form :rules="rules">

2，自定义validator

const rules: Record<string, Rule[]> = {
  barcode: [{ required: true, validator: validateBarcode, trigger: 'change' }],
};

3，填写你的规则方法

/**
 * 
 * @param _rule 表单校验规则
 * @param value 
 */
const validateBarcode = async (_rule: Rule, value: string) => {
  if (value === '') {
    return Promise.reject('条形码必须为7-19位纯数字');
  } else {
    if (formState.barcode.length > 19 || formState.barcode.length < 7) {
      return Promise.reject('条形码必须为7-19位纯数字');
    }
    return Promise.resolve();
  }
};

表单代码

<a-form :rules="rules">     
        <a-form-item label="商品条形码" :required="!isEdit" name="barcode" >
          <div class="good-barcode">
            <a-input class="goods-barcode-len" v-model:value="formState.barcode" 
            :disabled="isEdit"
              placeholder="条形码必须为7-19位纯数字" allow-clear @change="onChange" />           
          </div>
        </a-form-item>       
      </a-form>