前言

我这边表格不用怪，和element类似，只是我们移植了一层皮而已，所以中新思路大家明白就行

前言

一、表格校验

1、表格验证

前提：我这边qty这一列表格使用的是拥有编辑功能

<s-table ref="multipleVenMaterTable" border resizable show-overflow height="300" :data="venMaterData" :edit-rules="validRules" :edit-config="{trigger: 'dblclick', mode: 'row'}" @selection-change="handleSelectionVenMaterChange" >
            <s-table-column type="checkbox" width="60" />
            <s-table-column :label="$t('wms.receipt.materialNum')" field="materialNum" />
            <s-table-column :label="$t('wms.receipt.materialName')" field="materialName" />
            <s-table-column :label="$t('wms.receipt.unit')" field="unit" />
            <s-table-column :label="$t('wms.receipt.qty')" field="qty" :rules="threeFormRules.factory" :edit-render="{name: 'input'}"  />
          </s-table>

// data数据
validRules: {
        qty: [
          { required: true, message: '名称必须填写' }
        ]
      }
// 事件
threeVenMaterConmmit() {
	// 获取选中行数
      const selectRecords = this.$refs.multipleVenMaterTable.selection
      if (selectRecords.length > 0) {
        this.$refs.multipleVenMaterTable.validate(selectRecords, valid => {
          if (valid) {
            this.$XModal.message({ status: 'success', message: '校验成功！' })
          } else {
            this.$XModal.message({ status: 'error', message: '校验不通过！' })
          }
        })
      } else {
        this.$XModal.message({ status: 'warning', message: '未选中数据！' })
      }
    }

二、勾选el-table几条数据迁移到另一个el-table

<s-table
            ref="multipleVenMaterTable" border resizable show-overflow height="300" :data="venMaterData" :edit-config="{trigger: 'dblclick', mode: 'row'}" @selection-change="handleSelectionVenMaterChange" >
            <s-table-column type="checkbox" width="60" />
            <s-table-column :label="$t('wms.receipt.materialNum')" field="materialNum" />
            <s-table-column :label="$t('wms.receipt.unit')" field="unit" />
            <s-table-column :label="$t('wms.receipt.qty')" field="qty" :edit-render="{name: 'input'}" />
          </s-table>
<!-- 上面edit-config是我们自己的双击输入一个功能，大家忽视，这里有一个checkbox勾选 -->

data数据
enMatervalidRules: {
        qty: [
          { required: true, message: '可收数量必须填写', trigger: 'change' }
        ]
      }
方法
threeVenMaterConmmit() {
      const selectRecords = this.$refs.multipleVenMaterTable.selection
      this.$refs.multipleVenMaterTable.validate(selectRecords, valid => {
        if (valid) {
          this.$XModal.message({ status: 'success', message: '校验通过！' })
        } else {
          this.$XModal.message({ status: 'error', message: '校验不通过！' })
        }
      })
    }

三、表单校验

1、校验表单必填

<el-form ref="threeForm" class="stepThreeDiv" :rules="threeFormRules" :inline="true" :model="searchForm">
	<el-form-item :label=" $t('wms.receipt.factoryCode') " prop="factoryCode" :rules="threeFormRules.factory" >
          <el-select v-model="searchForm.factoryCode" clearable filterable :placeholder="$t('common.select')" @focus="getFactoryName" >
            <el-option label="ALL" value="" />
            <el-option v-for="item in factoryCodes" :key="item.factoryCode" :label="item.factoryName"
              :value="item.factoryCode" />
          </el-select>
        </el-form-item>
</el-form>

// data数据源：
searchFormRules: {
        createUsers: [{ required: true, message: 'createUser不能为空', trigger: 'blur' }]
      }
// 事件
this.$refs.threeForm.validate(valid => {
        if (valid) {
          console.log('通过')
          console.log(this.form.tableData)
        }
      })

2、正则校验

rules: {
        appActiveUserNum: [{
            trigger: 'blur',
            message: '输入不正规，输入不正规，最多9位数字,最多2位小数',
            pattern: /^([1-9]\d{0,8})([.]\d{1,2})?$|^0[.]([1-9]\d{0,1}|[0-9][1-9])$/
        }]
}

3、自定义方法校验

rules: {
   numValue: [{ trigger: 'blur', validator: validateFloatNum }]
},

export const validateFloatNum = (rule, value, callback) => {
  let reg = /^([0-9]\d{0,8})([.]\d{1,7})?$|^0[.]([0-9]\d{0,1}|[0-9][0-9])$/
  if (!reg.test(value)) {
    callback(new Error('输入不正规，最多9位数字,最多7位小数'))
  } else {
    callback()
  }
}

四、校验配置

4.1、type

type：输⼊类型，string
type可选属性：number,boolean,string,integer,float,array,enum,url,email,method,regexp,object,date,hex,any......
boolean：输⼊值为boolean
...
integer:整数（输⼊值⾮数字⽆效）
float：浮点数
array：数组
enum：枚举（{type: 'enum', enum: ['aaa', 'bbb'], message: `不存在enum中`, trigger: 'change'}）
...
any：任意值

4.2、required

required：是否必填，boolean
true:该表单为必填项
false:不必填项

4.3、Pattern

pattern：正则校验，正则表达式
//moneyNum:[{pattern: /^[0-9]*$/, message: `请输⼊数字`, trigger: 'blur'}]

4.4、min、max

min、max：最⼩，最⼤多少位，number
//minmax: [{min: 3, max: 8, message: '请输⼊3-8位', trigger: 'blur'}]

4.5、len

len：输⼊位数，number
//length: [ {len: 5, message: '请输⼊5位', trigger: 'blur'}]

4.6、whitespace

whitespace：验证是否只有空格，boolean

4.7、Messages

Messages：校验不通过提⽰，string

4.8、validator

validator：指定字段⾃定义验证功能，function
let numberLengthSix = (rule, value, callback) => {
 if(String(value).length > 6) {
 callback('超出限制')
 } else {
 callback()
 }
}
...//
//numberLengthSix: [{validator: numberLengthSix, trigger: 'blur'}

4.9、trigger

trigger：触发事件，string
blur：失去焦点触发
change：发⽣改变触发