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

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

1.展示效果

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

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

2.实现

2.1 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，直接限制输入内容

举例：告警设置上下限

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

举例：

  

      备  注：
      


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

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

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

      
        
      
      
        
          
          
        
      
      
        确定
      
    
    
export default{
	data(){
		return :{
			     netFormRules: {
			        name: [{ required: !0, message: "网络名称不能为空" }],
			        net_type: [{ required: !0, message: "网络类型不能为空" },trigger: 'blur'],
  				},
		}
	}
}

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