Avue表单或搜索项的校验方式

一、常规校验

// 单次校验
column: [
  {  
      label: "标题",  
      prop: "字段名", //对应数据库  
      type: "input",  //类型：input、select、number...
      span: 12, // 占位
      // rules：校验规则,如果不生效 就用searchRules
      rules: [{  
        required: true,  // 是否必填
        message: "错误提示",  
        trigger: "blur"  //触发类型 blur失焦、change选择、click点击... 
      }], 
      // searchRules：校验规则,如果不生效 就用rules
      searchRules: [
        {
          max: 50,
          message: "最多输入50个字符",
        },
      ],
  },
]

// 多次校验 {一个{}代表一个校验规则，按顺序执行}

rules: [
    { required:true, message:"",trigger:"blur" },
    { required:false, message:"",trigger:"click"}
]

二、非常规校验

// 正则等类型校验
column: [
 {  
   label: "标题",  
   prop: "字段名", // 对应数据库  
   type: "input",  // 类型：input、select、number...
   span: 12,  // 占位
   // rules：校验规则,如果不生效 就用searchRules
   rules: [
     // 基本校验
     {  
       type: 'string', // 输入类型
       max: 50, // 最大字符长度50
       required: true,  // 是否必填
       message: "错误提示",  
       trigger: "blur"  //触发类型 blur失焦、change选择、click点击... 
     },
     {  
       pattern: /^[+]{0,1}(\d+)$/, //正则校验 必须为正整数
       message: "必须为正整数",  
       trigger: "blur"  // 触发类型 blur失焦、change选择、click点击... 
     }
   ], 
  },
]

// 插槽 
// ref: 嵌入表单模块
// v-model: 绑定数据
// :option="name" 插入模块
<div v-show="div">  
  <avue-form ref="refForm" v-model="form" :option="data"></avue-form>  
  <el-divider></el-divider>
</div>
  
data() {
  
  //通用校验规则
  // rule 所在规则
  // value 当前触发值
  // callback 返回值
  // checkRule 规则名称
  // 注意生命周期 const、let、var
  const checkRule=(rule,value,callback) => {
    // 例：触发位于表单中，存在多行数据时
    // 取得所在行数据
    let rowIndex = rule.field.replace(/[^0-9]/ig,"");
    // 例：通用判断是否为正整数 
    if(!/^[+]{0,1}(\d+)$/.test(value)) {
      // 返回值设定 
      callback(new Error("当前值不是正整数!"));
      return;
    }

    // 例：多个Input框进行值对比 
    // prop1(prop命名) = value 当前所在Input输入值 
    let prop1 = value;
    // prop2(prop命名) 其他Input值获取 refForm 当前Input所在单元模块(对应开头)
    let prop2 = this.refForm.prop2;

    if(Number(prop1) < Number(prop2))
    {
      // 返回值设定 
      callback(new Error(" prop1 小于 prop2 "));
      return;
    }
  }

  return {
    // 通用属性...
    // 搜索项配置
    column：[
        // 调用公共方法
        {  
            label: "标题",  
            prop: "prop1", //对应数据库的字段  
            type: "input",  //类型：input、select、number...
            span: 12,  //占位
            // rules：校验规则,如果不生效 就用searchRules 
            rules: [
                // 基本规则
                {  
                    required: true,  // 是否必填
                    message: "错误提示",  
                    trigger: "blur"  
		},
                // 自定义规则
                {  
                    validator:checkRule, // 调用通用校验规则，checkRule代码在上面
                    // message: "异常提示",  // 在此处写提示后,通用规则返回值将不显示
                    trigger: "blur"，// 触发类型 blur失焦、change选择、click点击...   
                }
             ], 
            // searchRules：校验规则,如果不生效 就用rules
            searchRules: [
                // 基本规则
                {  
                    required: true,  // 是否必填
                    message: "错误提示",  
                    trigger: "blur"  
		},
                // 自定义规则
                {  
                    validator:checkRule, // 调用通用校验规则,checkRule代码在上面
                    // message: "异常提示",  // 在此处写提示后,通用规则返回值将不显示
                    trigger: "blur"，// 触发类型 blur失焦、change选择、click点击...   
                }
            ],
	},
	{  
	  label: "标题",  
	  prop: "prop2", //对应数据库的字段  
          type: "input",  //类型：input、select、number...
          span: 12,  //占位
          // rules：校验规则,如果不生效 就用searchRules 
          rules: [
              {  
                required: true,  //是否必填
                message: "错误提示",  
                trigger: "blur"  // 触发类型 blur失焦、change选择、click点击... 
                },
              {  
                validator:checkRule, // 调用通用校验规则
                // message: "异常提示",  // 在此处写提示后,通用规则返回值将不显示
                trigger: "blur",// 触发类型 blur失焦、change选择、click点击...   
              }
         ], 
         // searchRules：校验规则,如果不生效 就用rules
         searchRules: [
            {  
                required: true,  //是否必填
                message: "错误提示",  
                trigger: "blur"  // 触发类型 blur失焦、change选择、click点击... 
                },
            {  
                validator:checkRule, // 调用通用校验规则
                // message: "异常提示",  // 在此处写提示后,通用规则返回值将不显示
                trigger: "blur",// 触发类型 blur失焦、change选择、click点击...   
            }
         ],
	},

	// 私有方法 
	{  
	  label: "标题",
	  prop: "prop1", // 对应数据库
          type: "input",  // 类型：input、select、number...
          span: 12,  // 占位
          // rules：校验规则,如果不生效 就用searchRules 
          rules: [{  
             required: true,  // 是否必填
             // 私有方法使用 仅自己可用
             validator:(rule,value,callback)=> {
                 // 方法编写...
                 // 可获取同一表单中其他Input的值 获取方法同上
                 // 返回值方法同上
             },
             trigger: "blur" 
          }], 
          // searchRules：校验规则,如果不生效 就用rules
          searchRules: [
            {
              required: true,  // 是否必填
              // 私有方法使用 仅自己可用
              validator:(rule,value,callback)=> {
                 // 方法编写...
                 // 可获取同一表单中其他Input的值 获取方法同上
                 // 返回值方法同上
              },
              trigger: "blur" 
            },
          ],
        }
	
    ]
  }
}

三、 页面全部校验触发(防止必填项为空时输入至后端)

// 插槽 
// ref: 嵌入表单模块
// v-model: 绑定数据
// :option="name" 插入模块

// 插槽1 
<avue-form ref="form0" v-model="form" :option="option0">
// 插槽2 
<avue-form ref="form1" v-model="form" :option="option1">
// 插槽3
<avue-form ref="form2" v-model="form" :option="option2">
// 下一步按钮
<el-button v-show="nextShow" type="button" @click="next()">下一步</el-button>
// 提交按钮
<el-button v-show="submitShow" type="button" @click="submit()">提交</el-button>

// 三个插槽中 都含必填项 
option0(){
  // 略...
}
option1(){
  // 略...
}
option2(){
  // 略...
}

// 下一步时 校验是否含空值(必填项)
// 一个页面可能含多个表单模块 视情况而定
// 其中 page1 { form0 } 、 page2 { form1 , form2 }

// 下一步按钮执行的方法
next() {
  // 默认 无必填项为空
  let bl = true;
  // 对单元模块中每个字段进行触发,查看每个字段是否符合自定义的规则
  this.$refs[单元模块名称form0/form1...].validate((valid) => {
    //校验异常 自定义规则存在不符合情况
    if(!valid)
    {
        bl = false；
    }

    // 例：在循环中时,如page2，在全部模块都触发后执行最后一步 
    if(最后一次，已全部循环执行){
      // 无异常 都符合规则
      if(bl) {
         // 继续执行下一步...
         otherFunction()
      } else {
         // 弹出提示
         this.$message.warning('异常提示');
         return;
      }
    }
    
  });
}