element ui自定义表单校验（一行多个输入框必填及大于等于1的正整数表单校验）

公司这两天护网行动，什么都做不了。为了打发时间，写两篇笔记吧~~~ 废话不多说，直接上代码 ~~

// el-form-item里 这样写只对threshold做了校验    ruleForm.increaseNumber 不填写或者乱填都可以通过校验
<el-form
   :model="ruleForm"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
    :rules="rules">
  <el-form-item label="规则" prop="threshold">
   	   <span>卡券的可售数量不足</span>
	   <el-input
	         v-model="ruleForm.threshold"
	         prop="threshold"
	         style="width:80px;margin-left:20px;"
	         placeholder
	       ></el-input>
       <span style="margin-left:20px;">件，</span>
       <span>自动增加</span>
       <el-input
         v-model="ruleForm.increaseNumber"
         prop="increaseNumber"
         style="width:80px;margin-left:20px;"
         placeholder
       ></el-input>
      <span style="margin-left:20px;">件</span>
  </el-form-item>
</el-form>

js部分代码实现

import { positiveIntNum,required } from "../../../utils/rules"
// data里定义校验规则
data() {
  // 自定义校验规则 方法
    let relusList = (rules,value,callback)=>{
    // 限制只能输入大于1的正整数的正则
      let regExp = /^[1-9]\d*$/;
      //if 对两个输入框的value值进行必填校验
      if(!this.ruleForm.threshold || !this.ruleForm.increaseNumber){
        return callback(new Error('该项为必填项'))
        // 对第二个输入框进行正则校验
      }else if(regExp.test(this.ruleForm.increaseNumber) === false){
        callback(new Error('只能输入大于等于1的正整数'));
      }else{
        return callback()
      }
    }
    return {
      ruleForm: {
        threshold: "",
        increaseNumber: "",
      },
      rules: {
      // threshold 用 validator: relusList, 自定义校验规则
        threshold: [
          { required: true, validator: relusList, trigger: "blur" },
          positiveIntNum,//这个是公共校验规则js 引入的方法所以自定义校验时只对第二个输入框进行了校验
        ],
      }
    }
  }

公共校验rules.js

export let required = {
    required: true,
    message: "该项为必填项",
    trigger: "blur"
}
export let positiveIntNum = {
    pattern: /^[1-9]\d*$/,
    message: '只能输入大于等于1的正整数'
}
export let twoFloat = {
    pattern: /^([0-9]*)+(\.[0-9]{1,2})?$/,
    message: "最多只能输入两位小数"
}

export let numberLetter = {
    pattern: /^[A-Za-z0-9]+$/,
    message: "只能输入字母和数字"
}

export let chineseChar = {
    pattern: /[\u4e00-\u9fa5]/,
    message: "只能输入中文"
}

ok~ 写到这里，如果有更好的方式欢迎补充~~