平台表单及可编辑表格校验手册

一、概述

​ 原则上动态表格使用动态表格组件自带的校验，这里主要提供全面且规范的非动态表格的表单和可编辑表格校验 API 查询手册。

二、表单校验

1. 表单校验代码参考

<el-form
  :model="form"
  :rules="rules"
  ref="formData"
  :inline="true"
  label-width="80px"
  label-position="top"
  class="form-container form-inline form-padding"
>
  <el-form-item label="编码" prop="code">
    <el-input v-model="form.code" :maxlength="50" clearable></el-input>
  </el-form-item>
  <el-form-item label="名称" prop="name">
    <el-input :maxlength="100" v-model="form.name" clearable></el-input>
  </el-form-item>
  <el-form-item label="数量" prop="qty">
    <el-input v-model="form.qty" :maxlength=9 clearable></el-input>
  </el-form-item>
  <el-form-item label="优先级" prop="priority">
    <el-input v-model="form.priority" :maxlength=2 clearable></el-input>
  </el-form-item>
  <el-form-item label="生产时间（秒）" prop="cycleTime">
    <el-input v-model="form.cycleTime" :maxlength=9 clearable></el-input>
  </el-form-item>
  <el-form-item :label="$t('备注')" prop="remark">
    <el-input
      type="textarea"
      autosize
      v-model="form.remark"
      maxlength=200
      clearable      
    ></el-input>
  </el-form-item>
  <el-form-item :label="$t('单据类型')" prop="billType">
    <el-select v-model="form.billType" :placeholder="$t('请选择')" filterable>
      <el-option
        v-for="item in billTypeList"
        :key="item.key"
        :label="item.value"
        :value="item.key"
      ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item :label="$t('物料编码')" prop="mrlCode">
    <mrlSearchBack
      v-model="form.mrlCode"
      @selectedRows="selectMrlCodeEdit"
      :multiple="false"
    ></mrlSearchBack>
  </el-form-item>
  <el-form-item :label="$t('物料名称')" prop="mrlName">
    <el-input v-model="form.mrlName" disabled/>
  </el-form-item>
</el-form>

rules:{
   code: [
     {required: true, message: "编码不能为空", trigger: "blur"},
     { pattern: /^\S(.*\S)?$/g, message: "不允许首尾空格" , trigger: "blur"},
     { validator: checkCode, trigger: "blur"},
   ],
   name: [
     {required: true, message: "名称不能为空", trigger: "blur"},
     { pattern: /^\S(.*\S)?$/g, message: "不允许首尾空格" , trigger: "blur"},
   ],
   qty: [
     {required: true, message: "数量不能为空", trigger: "blur"},
     { pattern: /^-?\d+(\.\d+)?$/, message: "必须是数字类型" , trigger: "blur"},
   ], 
   priority: [
      { pattern: /^[1-9]\d*$/, message: "必须是正整数" , trigger: "blur"},
   ],
   cycleTime: [
     {required: true, message: "生产时间不能为空", trigger: "blur"},
     { pattern: /^-?\d+(\.\d+)?$/, message: "必须是数字类型" , trigger: "blur"},
   ], 
   billType: [
     {required: true, message: "单据类型不能为空", trigger: "blur"},
   ],
   mrlCode: [
     { message: "物料编码不能为空", required: true, trigger: "change"},
   ],
},

2. 各种校验说明

2.1 输入框校验

编码：

• 必填校验
• 字段长度校验，一般 0~50 字符
• 首尾空格校验
• 唯一性校验

名称

• 必填校验
• 字段长度校验，一般 0~100 字符
• 首尾空格校验

数量

• 必填校验
• 字段长度校验，一般 0~9 字符
• 数字类型校验，一般是非负整数

优先级

• 字段长度校验，一般 0~2 字符
• 数字类型校验，一般是正整数

生产时间

• 必填校验
• 字段长度校验，一般 0~9 字符
• 数字类型校验，一般是非负数

2.2 文本域校验

备注

• 字段长度校验，一般 0~200 字符

2.3 选择框校验

• 若为必填项，不需要 "== 请选择 ==" 的选择项，新增时赋值，默认选择第一条；删除 clearable 属性，必加 filterable 属性。

2.4 查找带回检验

• 必填校验

注意：必加 searchField="code" 属性。

2.5 自定义校验

• 编码唯一性后端校验

let self = this;
    let checkCode = (rule, value, callback) => {
      if (value === "" || value == null) {
        callback(new Error(vue.$t("des.thisIsRequired")));
      } else {
        let resultPromise = self.getResultCode(value);
        resultPromise.then((res) => {
          if (res.type === "error") {
            callback(new Error(res.data));
          } else {
            callback();
          }
        });
      }
    };
//远程校验
async getResultCode(value) {
   let self = this;
   let data = qs.stringify({
      id: self.form.id,
      code: value,
   });
   let res = await self.$http.post(url, data);
   return res;
},

public void unique() {
    Map<String, Object> map = new HashMap();
    String id = (String)this.pageData.getParams().get("id");
    String code = (String)this.pageData.getParams().get("code");
    boolean isUnique = this.bppCommonService.unique(PmbfWorkCellClass.class, id, "code", code);
    if (isUnique) {
        map.put("type", "success");
        map.put("data", "[" + code + "]可以使用！");
    } else {
        map.put("type", "error");
        map.put("data", "已存在[" + code + "]，请重新维护！");
    }

    this.returnData.toParam(map);
}

三、可编辑表格校验

{
  prop: "prepareTime",
  label: vue.$t("准备时间 (秒)"),
  width: "150px",
  showOverflowTooltip: false,
  refEntity: "cycle",
  refName: "prepareTime",
  render: (h, params) => {
    return h('el-input', {
      props: {
        value: params.row.prepareTime,
      },
      attrs: {
        type:'number',
        // placeholder: '请输入',
        clearable: true,
      },
      on: {
        input: (value) => {
          params.row.prepareTime = value;
        },
        change: (value) => {
          if(value){
            const reg = /^\d*\.?\d+$/;
            let msg = '';
            if (value.length > 9) {
              msg = '字段长度在 1 到 9 个字符！';
              params.row.prepareTime = value.substr(0,9);;
            } else if (reg.test(value) === false) {
              msg = '必须是正数';
              params.row.prepareTime = '';
            }
            if (msg.length > 0) {
              vue.$message({message: msg, type: 'warning', customClass: 'zZindex', showClose: true});
            }
          }
        }
      }
    });
  },
},

四、校验常用正则表达式

• 首尾空格匹配

/^\S(.*\S)?$/g

• 数字类型匹配

/^-?\d+(\.\d+)?$/

• 正数匹配

/^[1-9]\d*(\.\d+)?$/

• 非负数匹配

/^\d+(\.\d+)?$/

• 正整数匹配

/^[1-9]\d*$/

• 非负整数匹配

/^\d+$/