Form表单组件-表单验证-自定义检验规则

自定义检验规则

场景 : 密码不允许是 123456
思路 : 在rules中自定义validator
格式 :

rules:{
    属性名1: [
      
      { 
        // 注意参数顺序
        validator: function (rule, value, callback) {
      		// rule：采用的规则
          // value: 被校验的值
          // callback是回调函数， 
          //      如果通过了规则检验，就直接调用callback()
          //      如果没有通过规则检验，就调用callback(错误对象，在错误对象中说明原因)
        	//         例如：callback(new Error('错误说明'))
      	}, 
        trigger: 'blur' 
     }
    ]
}

落地代码 :

rules: {
  //自定义
  code: [
      {
        validator:(rule, value, callback)=>{
          console.log(rule, value, callback)
          if(value === '123456') {
            callback(new Error('这是世界上最差的密码了'))
          } else {
            callback()
          }
      	},
        triggle: 'blur'
      },
      {min: 6, max:8, message:'长度为6-8位', triggle: 'blur'},
      {required: true, message:'必须要填入', triggle: 'blur'},
  ]
}

小结

• 自定义规则可以让校验逻辑更加灵活，它的格式是固定的
• callback必须调用

补充 -重置表单清理校验痕迹

格式 :this.refs.form组件的引用.resetFileds()