elementui 表单公共方法验证-二

项目中有了一个公共的表单验证后，随着需求的深入，会有不同的输入要求，比如a页面的‘name’要求字符只能中文与校验字符串长度,b页面的则需要必录加校验字符串长度以及中文。
仔细观察可以看到rules取的都是一个对象数组，可以是一个，可以是多个，只要是对象数组并符合写法就能正确校验，所以我们只需要写一个公共校验即可。根据多数制定规则，个例根据需求赋值即可。

公共校验

这里是如何提取校验集结成公共方法的文章

定制校验

//a页面--只校验中文及字符长度
<el-form-item label="员工姓名:" 
	prop="name"
	:rules="[$rules.common.name[1],$rules.common.name[2]]" >
  <el-input v-model="demo.name"></el-input>
</el-form-item>

//b页面--全部校验
<el-form-item label="员工姓名:" prop="name"
  :rules="$rules.common.name" >
  <el-input v-model="demo.name"></el-input>
</el-form-item>

//公共校验
  common: {
    name: [
      {
        required: true,
        message: "姓名不能为空",
        trigger: "blur"
      },
      {
        pattern: /^[\u0391-\uFFE5]+$/,
        trigger: ["blur", "change"]
      },
      {
        minn: 0,
        max: 15,
        message: "长度不能超过15个字符"
      }
    ]
}

此方法在一个完整的form表单中应用是一样的，上面的代码也是我从里面摘出来的个例。每个form内的表单都能指定rules，只要写准prop指向。就能通过 this.$refs[formName].validate((valid) => { if (valid) {//操作}}) 校验。

<el-form :model="ruleForm2" status-icon :rules="$rules.common" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
  <el-form-item label="姓名" prop="name">
    <el-input  v-model="ruleForm2.name" autocomplete="off"></el-input>
  </el-form-item>
 <el-form-item label="中文名" prop="name2" ：rules="$rules.common.name[1]">
    <el-input  v-model="ruleForm2.name2" autocomplete="off"></el-input>
  </el-form-item>
    <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
  </el-form-item>
</el-form>

联动验证

eg：选择身份证时，姓名栏只允许输入中文，选择其他证件时，仅校验字符串长度。iDType==‘0’ 时为身份证。

<el-form :model="demo" :rules="$rules.common" ref="demo">
	<el-form-item label="姓名:" prop="name"
		:rules="demo.iDType=='0' ? 
		[$rules.common.name[1]: $rules.common.name[2]" >
		<el-input v-model="demo.name" ></el-input>
	</el-form-item>
	<el-form-item label="证件类型:" prop="iDType">
	    <el-select v-model="demo.iDType">
	      <el-option v-for="item in IDTypeArr" 
	      :key="item.CKey" 
	      :label="item.CName" 
	      :value="item.CKey">
	      </el-option>
	    </el-select>
  	</el-form-item>
</el-form>