Antd-rules-自定义校验规则

前言

公司UI出了一个表单提交的规则校验效果
需要自定义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>

实现效果

符合我的rules
这里有个属性，需要说明一下 我在代码中去掉了 需要的话自己加

has-feedback

属性为输入框添加了表示校验结果的反馈图标。

不符合我的rules