AVUE表单/单元格校验

一、常规校验

--- 单次校验
column: [
{  
  label: "标题",  
  prop: "字段名", -- 对应数据库  
  type: "input",  -- 类型：input、select、number...
  span: 12,  -- 占位
  -- rules：校验规则
  rules: [{  
    required: true,  -- 是否必填
    message: "错误提示",  
    trigger: "blur"  -- 出发类型 blur失焦、change选择、click点击... 
  }],  
},
]

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

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

二、非常规校验

• 正则等类型校验

column: [
{  
  label: "标题",  
  prop: "字段名", -- 对应数据库  
  type: "input",  -- 类型：input、select、number...
  span: 12,  -- 占位
  -- rules：校验规则
  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：校验规则
      rules: [{  
	    required: true,  -- 是否必填
	    message: "错误提示",  
	    trigger: "blur"  
		},{  
	    validator:checkRule, -- 调用通用校验规则
	    // message: "异常提示",  -- 在此处写提示后,通用规则返回值将不显示
	    trigger: "blur"  
	  }],  
	},
	{  
	  label: "标题",  
	  prop: "prop2", -- 对应数据库  
      type: "input",  -- 类型：input、select、number...
      span: 12,  -- 占位
      -- rules：校验规则
      rules: [{  
	    required: true,  -- 是否必填
	    message: "错误提示",  
	    trigger: "blur"  -- 出发类型 blur失焦、change选择、click点击... 
		},{  
	    validator:checkRule, -- 调用通用校验规则
	    // message: "异常提示",  -- 在此处写提示后,通用规则返回值将不显示
	    trigger: "blur" 
	  }],  
	},

	****** 私有方法 
	{  
	  label: "标题",  
	  prop: "prop1", -- 对应数据库  
      type: "input",  -- 类型：input、select、number...
      span: 12,  -- 占位
      -- rules：校验规则
      rules: [{  
        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()
{
  -- 默认 无必填项为空
  var bl = true;
  -- 对单元模块中每个字段进行触发,查看每个字段是否符合自定义的规则
  this.$refs[单元模块名称form0/form1...].validate((valid) =>
  {
    -- 校验异常 自定义规则存在不符合情况
    if(!valid)
    {
	    bl = false；
    }

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