前言

我这边表格不用怪，和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()
  }
}