定义校验规则

校验规则可以对表单中的编码做出校验，例如校验复杂的编码等。

创建规则

局部规则

局部规则按照你输入的位数有序的校验。 可以添加多行局部规则，按照添加的顺序逐行进行判断 比如说第一行的位数是3，第二行的位数是2，第三行的位数是4，那么在实际校验的时候，第一行校验的是1-3位字符串，第二行从上一行结束的位置开始向后移2位，也就是4-5位，第三行以此类推，可得出是6-9位。

全局规则

全局规则跟局部规则不同的地方是：全局规则是对用户输入的整个字符串进行判断，而不是只判断第几位。 全局规则有运行的优先级，他们分别是：

• 优先运行 会在局部规则之前运行
• 最后运行 会在局部规则全部校验通过之后运行

使用方法

第一步：新建Form表单

第二步：引入工具类

import { validateCheckRule } from '/@/views/system/checkRule/check.rule.api';

第三步：使用工具类实现校验规则

第四步：查看效果

未通过效果：

通过效果：

完整前端代码

<template>
    <a-form style="padding: 40px" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="编码" v-bind="validateInfos.code">
            <a-input v-model:value="modelRef.code" />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: wrapperCol.span, offset: labelCol.span }">
            <a-button type="primary" @click.prevent="onSubmit">提交</a-button>
            <a-button style="margin-left: 20px" @click="resetFields">重置</a-button>
        </a-form-item>
    </a-form>
</template>
<script setup>
import { defineComponent, reactive, toRaw } from 'vue';
import { Form } from 'ant-design-vue';
import { validateCheckRule } from '/@/views/system/checkRule/check.rule.api';
const useForm = Form.useForm;
const labelCol = {
    span: 4,
};
const wrapperCol = {
    span: 14,
};
const modelRef = reactive({
    code: '',
});
const rulesRef = reactive({
    code: [
        {
            required: true,
            validator: (rule, value) => {
                 return new Promise((resolve, reject) => {
                     if (!value) reject('请输入编码');
                        validateCheckRule('common', value)
                            .then((res) => {
                                if (res.success) {
                                    resolve();
                                } else {
                                    reject(res.message);
                                }
                    })
                    .catch((err) => {
                        reject('网络环境差，请重试~');
                    });
                });
            },
        },
    ],
});
const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef);
const onSubmit = () => {
    validate()
    .then(() => {
        console.log(toRaw(modelRef));
    })
    .catch((err) => {
        console.log('error', err);
    });
};
</script>

Online表单的JS增强里如何调用生成的校验规则编码？

可通过getAction方法来调用接口来校验字段

beforeSubmit(row){
	return new Promise((resolve, reject)=>{
        getAction('/sys/checkRule/checkByCode', { ruleCode:'test',value: row.name}).then(res => {
          console.log("校验结果res",res)
           if(!res.success){
            reject(res.message)
          }else{
            resolve()
         }
   })
  })
}