jeecg-boot:前端antd 表单校验方式整理

jeecg-boot对antd-vue的校验做了封装，总体来讲分为表单校验和JEditableTable 校验：

表单校验：

以以下为例：

 

<a-form :form="form">
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="设备大类名称">
              <a-input placeholder="请输入设备大类名称" v-decorator="['deviceBigTypeName', validatorRules.deviceBigTypeName]" />
            </a-form-item>
          </a-col>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="设备大类编码">
              <a-input placeholder="请输入设备大类编码" v-decorator="['deviceBigTypeCode', validatorRules.deviceBigTypeCode]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="备注">
              <a-input placeholder="请输入备注" v-decorator="['remark', validatorRules.remark]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="排序">
              <a-input-number placeholder="请输入排序" style="width:100%" v-decorator="[ 'sortNo', validatorRules.sortNo]"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

如果要校验，那么需要增加v-decorator属性

v-decorator属性的值是数组，第一个元素是该元素的字段名，第二个是一个json格式的数据，用来进行校验配置，

如下：

 validatorRules: {
          deviceBigTypeName:{
            rules: [{ required: true, message: '请输入设备大类名称!' }]
          },
          deviceBigTypeCode:{
            rules: [{ required: true, message: '请输入设备大类编码!' },
              { validator: validatAlphabets }]
          },
          remark:{
            rules: [{ required: true, message: '请输入备注!' }]
          },
          sortNo:{
            rules: [{ required: true, message: '请输入排序号!' }]
          },
        },

rules配置的是校验规则

值为数组 

[{ required: true, message: '请输入设备大类编码!' }, { validator: validatAlphabets }]

数组的每一个元素都是一组规则，

比如第一个规则是配置必填的，需要配置required和message

required的取值：false/true

message表示不符合要求的时候进行提示的内容

第二个规则是配置的合法性校验

validator属性的值是一个校验函数（参考一下utils/vlidate.js的validataAlphabets函数）

在该文件中引入

 import {validatAlphabets } from '@/utils/validate'

 

以下是校验的函数库。

utils/validate.js

/* 大小写字母*/
export function validatAlphabets(rule, value, callback) {
  const reg = /^[A-Za-z]+$/;
  const rsCheck = reg.test(value);
  if (!rsCheck) {
    callback(new Error('请输入大写或小写字母！'));
  } else {
    callback();
  }
}

配置完这些就可以看效果了：

进入到界面，点击确定按钮，就执行校验规则，如果不符合校验规则，那么就进行提示

输入合法数据以后，提醒就消除

 

======================================================================================================

分割线，以上讲解的是表单中的校验

那么在可编辑表格中怎么校验呢

即JEditableTable 

官网有详细的讲解

http://jeecg-boot.mydoc.io/?t=345687#validaterules-配置规则

edittable的校验与表单有所不同，他的合法校验是直接进行正则表达式校验

比如：

 // 表单验证规则
        validateRules: [
            {
                required: true, // 必填
                message: '${title}不能为空' // 提示的文本
            },
            {
                pattern: /^[a-z|A-Z][a-z|A-Z\d_-]{0,}$/, // 正则
                message: '${title}必须以字母开头，可包含数字、下划线、横杠'
            }
        ]

edittable不能直接用validator属性调用校验函数，需要通过pattern直接配置正则表达式。

好了

分析的差不多了

以后遇到问题再进行分析