element UI form校验规则和输入限制

工作中经常遇到很多的form表单，这些表单会对input框做一些输入限制，这个案例是element UI引入的el-form，限制输入数字，长度，数字大小等。

1.展示效果

1.1 CPU行大小超出范围提醒，内存行输入不是数字提醒，硬盘行符合规则。

1.2 点击确认提交数据时，控制台会输出黄色警告，提示不满足条件

2.实现

2.1 el-form的引入和绑定数据

<el-form
    label-width="80px"
     :model="auto_alarm_cfg"   //数据双向绑定
     :rules="cfg_rules"    //绑定规则
     ref="cfg_form"
   >
     <el-form-item label="CPU" prop="cpu">
       <el-input
         v-model.number="auto_alarm_cfg.cpu"   
          //修饰符限制输入为数字（若不限制，输入数字也会默认为string类型去做验证）
         :value="auto_alarm_cfg.cpu | intNumber"
        // intNumber 为筛选器filters内定义的取整方法 ，下面就不写了，注释在这里，需要的话复制到filters内
        //   filters: {
		//		intNumber(value) {
  		//			return Number.parseInt(value);
		//		 },
		//	},
       />
     </el-form-item>
     <el-form-item label="内存" prop="memory">
       <el-input
         v-model.number="auto_alarm_cfg.memory"
         :value="auto_alarm_cfg.memory | intNumber"
       />
     </el-form-item>
     <el-form-item label="硬盘" prop="storge">
       <el-input
         v-model.number="auto_alarm_cfg.storge"     
         :value="auto_alarm_cfg.storge | intNumber"
       />
     </el-form-item>
     <el-form-item>
       <el-button
         type="primary"
         @click="submitSelfConfig"
         :disabled="cfg_disable"
         >确定</el-button
       >
     </el-form-item>
 </el-form>

2.2.js部分 data中的数据绑定，规则定义，规则绑定

 export default{
	 data（）{
	 //定义规则NumberPattern，限制输入0-100的整数，将在cfg_rules中引用
	 const NumberPattern = new RegExp(/^([1-9]?\d|100)$/);  
		return {
    		auto_alarm_cfg: {  //数据绑定
		        cpu: null,
		        memory: null,
		        storge: null,
	     	 },
	     	       cfg_rules: { //规则绑定
	        cpu: [
	          { required: !0, message: "不能为空" },
	          { type: "number", message: "必须为数字", trigger: "blur" },
	          {
	            pattern: NumberPattern,
	            message: "0-100之间的整数",
	            trigger: "blur",
	          },
	        ],
	        memory: [
	          { required: !0, message: "不能为空" },
	          { type: "number", message: "必须为数字", trigger: "change" },
	          {
	            pattern: NumberPattern,
	            message: "0-100之间的整数",
	            trigger: "blur",
	          },
	        ],
	        storge: [
	          { required: !0, message: "不能为空" },
	          { type: "number", message: "必须为数字", trigger: "change" },
	          {
	            pattern: NumberPattern,
	            message: "0-100之间的整数",
	            trigger: "blur",
	          },
	        ],
	      },
    	 }
	}
 }

3.注意点

3.1 表格数据绑定时，如果验证的是数字，最好使用修饰符，防止用户输入数字，但是默认为字符串，然后提交表格时，会报错输入的不是数字。

3.2 每一个Input框的验证，对应了一个数组，这个数组可以有多个对象，也就是说可以同时设置多个规则

3.3 :rules绑定规则，prop绑定了rules对应哪个input框（即v-model属性和prop名称必须一致，v-model的CPU对应rules中的CPU）

补充：

1.绑定oninput，直接限制输入内容

举例：告警设置上下限

     <el-form-item
          label="告警下限"
          class="self-inline"
          prop="lowervalue"
        >
          <!-- <el-input v-model="reviewLowervalue" :readonly="bat_readonly" /> -->
          <el-input
            v-model.number="bat_data.lowervalue"
            oninput="if(value>9999999){value=9999999}else if(value<-9999999){value=-9999999}"
          />
    </el-form-item>

2.绑定键盘事件，限制输入特殊字符

举例：

  <div class="DPbody">
      <span>备&emsp;&emsp;注：</span>
      <el-input
        type="text"
        show-word-limit
        v-model="desInfo"
        size="mini"
        maxlength="30"
        @keyup.native="btKeyUp"
      ></el-input>
</div>

methods:{
	btKeyUp(e) {
 		 e.target.value = e.target.value.replace(
   		 /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;‘\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g,
   		 "");
	 },
}

3.点击按钮才验证，blur不验证

需求：必填项为空，失去焦点，也不提示，表单也不能标红，失去焦点只能校验其他规则，比如邮箱格式，手机号格式等，当点击提交或确定按钮，所有为空的表单给出提示，且标红。实现的方法是三目绑定validate-event。

<el-form
      :model="networkForm"
      class="form"
      :rules="netFormRules"
      ref="networkForm"
      :disabled="isViews ? true : false"
    >
      <el-form-item label="网络名称" label-width="100px" prop="name">
        <el-input
          v-model="networkForm.name"
          style="width: 500px"
          :validate-event="networkForm.name == '' ? false : true"
        ></el-input>
      </el-form-item>
      <el-form-item label="网络类型" label-width="100px" prop="net_type">
        <el-select
          v-model="networkForm.net_type"
          placeholder="请选择网络类型"
          style="width: 200px"
           :validate-event="networkForm.net_type == '' ? false : true"
        >
          <el-option
            v-for="item in networkTypeList"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="text-align: right; margin-right: 50px">
        <el-button @click="networkSubmit" size="small" type="primary"
          >确定</el-button
        >
      </el-form-item>
    </el-form>
    
export default{
	data(){
		return :{
			     netFormRules: {
			        name: [{ required: !0, message: "网络名称不能为空" }],
			        net_type: [{ required: !0, message: "网络类型不能为空" },trigger: 'blur'],
  				},
		}
	}
}

备注：在需求的input框绑定validate-event，若为选择框，还需要把校验的触发事件设置为blur