vue表单验证rules及validator验证器的使用方法实例

目录

• 前言
• 表单验证rules
• 自定义校验规则
• 总结

前言

为防止用户犯错，尽可能更早地发现并纠正错误。

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

注意：prop对应表单域 model 字段，使用 validate方法时，该属性是必填的。

表单验证rules

以官网给出的例子分析来看

将prop 属性设置为需校验的字段名。

 在data里配置要校验字段和校验规则：

required:true表示为必须输入；

message:""设置不符合校验规则时的提示信息；

trigger:""设置校验的触发方式：

        ‘change’:数据改变时触发；

        ‘blur’:失去焦点时触发；

        没有进行任何输入时,不会触发change,但一定会触发blur事件。

设置校验规则后，表头会出现红色*样式

该示例完整代码：

  
    
  
  
    
      
      
    
  
  
    
      
        
      
    
    -
    
      
        
      
    
  
  
    
  
  
    
      
      
      
      
    
  
  
    
      
      
    
  
  
    
  
  
    立即创建
    重置
  

自定义校验规则

除此之外，我们还可以使用validator验证器来自定义校验规则，

举一个使用自定义验证规则来完成密码的二次验证的例子。

还是和之前一样，设置prop需校验的字段名和v-model绑定值

 但这时，我们需要在data中自己定义校验规则，需要注意的是，设置的规则与return同级。

 在rules中配置要校验的字段和用到的规则

 

完整代码如下：

  
    
  
  
    
  
  
    
  
  
    提交
    重置
  

总结

到此这篇关于vue表单验证rules及validator验证器使用的文章就介绍到这了,更多相关vue表单验证器使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！