浅谈validator自定义验证及易错点

目录

• validator自定义验证及易错点
• validator自定义验证
• 易错点
• vue里面如何自定义校验
• 如下
• 也可以自定义校验

validator自定义验证及易错点

validator自定义验证

element中Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

而表单验证功能就包括validator自定义验证，用法如图所示

在验证规则中自定义一个规则，命名随意，再给它一个触发函数，而规则自定义的方法如下

• value：输入的数据；
• callback：回滚的对象

在这个箭头函数中定义自己想要的规则，就可以实现自定义，但要注意的是必须回滚

易错点

写完测试时发现自定义的验证无法使用，但是其他验证缺没有任何问题，那原因就是在于数据没有绑定成功

这时就应该检查图中这三个地方，自定义验证时是需要这三个地方保持一致的，否则自定义验证不会成功

vue里面如何自定义校验

正常用的都是elemelnt-ui组件的form表单；里面有校验规则；

如下

  
    
  
  
    
      
      
    
  
  
    
      
        
      
    
    -
    
      
        
      
    
  
  
    
  
  
    
      
      
      
      
    
  
  
    
      
      
    
  
  
    
  
  
    立即创建
    重置
  

也可以自定义校验

如下：

通过validator属性来自定义；是模拟form表单那个自定义校验规则的

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。