vue rules 不校验 vue校验器

转载

香奈儿 2024-05-27 15:15:57

文章标签 vue rules 不校验 Vue 自定义 github 文章分类 架构后端开发

官方文档：http://vuejs.github.io/vue-validator/zh-cn/index.html

github项目地址：https://github.com/vuejs/vue-validator

单独使用vue-validator的方法见官方文档，本文结合vue-router使用。

安装验证器

不添加自定义验证器或者无需全局使用的公用验证器，在main.js中安装验证器，使用 CommonJS 模块规范, 需要显式的使用 Vue.use() 安装验证器组件。

import Validator from ‘vue-validator’
Vue.use(Validator)
与 vue-router 同时使用，必须在调用 router#map, router#start 等实例方法前安装验证。

若要自定义验证器，建一个js文件，在该文件中安装验证器组件。例如：validation.js

import Vue from ‘vue’
 import Validator from ‘vue-validator’
 Vue.use(Validator)
 //自定义验证器
 自定义验证器

官方提供的api如下

复制代码

input[type=“text”]
 input[type=“radio”]
 input[type=“checkbox”]
 input[type=“number”]
 input[type=“password”]
 input[type=“email”]
 input[type=“tel”]
 input[type=“url”]
 select
 textarea

复制代码
但是以上的不一定满足我们的需求，这时就需要用到另一个全局api，用于注册和获取全局验证器。

Vue.validator( id, [definition] )
示例定义validation.js 内容如下

复制代码

import Vue from ‘vue’
 import Validator from ‘vue-validator’
 Vue.use(Validator)
 //自定义验证器
 //添加一个简单的手机号验证
 //匹配0-9之间的数字,并且长度是11位
 Vue.validator(‘tel’, function (val) {
 return /1{11}KaTeX parse error: Expected 'EOF', got '}' at position 13: /.test(val) }̲); //添加一个密码验证 /…/.test(val)
 });

复制代码
使用验证器

验证器语法

复制代码

不得少于3个字符
不得大于15个字符

复制代码

默认情况下，vue-validator 会根据 validator 和 v-validate 指令自动进行验证。然而有时候我们需要关闭自动验证，在有需要时手动触发验证。如果你不需要自动验证，可以通过 initial 属性或 v-validate 验证规则来关闭自动验证。如下：

复制代码

不得少于3个字符
不得大于15个字符

复制代码

Terminal 指令问题

复制代码

<input @invalid=“passwInvalid” @valid=“passwok” type=“password” v-model=‘passw’ id=‘passw’ v-validate:passw="[‘passw’]" detect-change=“off” initial=‘off’ placeholder=‘请输入密码’>
 <input @invalid=“passwInvalid” @valid=“passwok” type=“password” v-model=‘passw2’ id=‘passw2’ v-validate:passw2="[‘passw’]" detect-change=“off” initial=‘off’ placeholder=‘请输入密码’>复制代码

示例：用户注册验证

用了一个组件来显示提示信息

toast.vue

复制代码