Vue表单验证
- Vue有许多插件,Vue插件
- vee-validate:vue最好的验证插件。vee-validate
1. vee-validate自然输入校验
使用步骤
:
-
安装:
npm i vee-validate
-
创建独立校验文件utils/validate.js,导入默认校验规则。
示例代码
:import { extend } from 'vee-validate' import * as rules from 'vee-validate/dist/rules' // rules: {alpha:xx,alpha_dash:xx,alpha_num:xx……} Object.keys(rules).forEach(rule => { extend(rule, rules[rule]) }) // Object.keys(rules) 获得对象中全部的属性名称, // 并以数组返回["alpha", "alpha_dash", "alpha_num", ……] // extend(rule, rules[rule]) 完成每个内置校验规则的注册操作
各种校验规则
:规则 含义 alpha 只包含英文字符 alpha_dash 可以包含英文、数字、下划线、破折号 alpha_num 可以包含英文和数字 alpha_spaces 可以包含英文和数字 between:{min},{max} 在min和max之间的数字 confirmed:{target} 必须和target一样 digits:{length} 长度为length的数字 dimensions:{width},{height} 符合宽高规定的图片 email 符合邮箱规则 excluded 排除,不包括 ext:[extensions] 后缀名 image 图片 integer 整型 is 必须是 is_not 不是 length 规定输入内容长度 max:{length} 规定输入内容的最大长度为length min:{length} 规定输入内容的最小长度为length max_value:{val} 规定输入最大数值为val的 min_value:{val} 规定输入最小数值为val的 mimes:[list] 文件类型 numeric 只允许数字 oneOf 其中之一 regex 匹配正则表达式 required 必填项目 required_if 仅当目标字段(第一个参数)设置为指定值(其他参数)之一时,验证中的字段才必须具有非空值 size:{kb} 文件大小不超过 -
main.js文件引入验证独立文件:
import '@/utils/validate.js' // 验证相关
-
登录组件应用验证:
<!-- user/login.vue --> <van-cell-group> <!-- 表单域校验,通过 ValidationProvider 对被校验的项目做包围 name:校验失败,提示当前项目名称,定义校验字段名称,用作错误提示使用 rules:设置校验规则,required 必填 v-slot: 接收"作用域插槽"数据,即校验失败错误信息 注意:当前这个地方只能使用v-slot(使用slot-scope,页面没有效果)--> <ValidationProvider name="手机号" rules="required" v-slot="{ errors }"> <!-- 把校验的错误信息展示出来,error-message:显示校验失败的错误信息 --> <van-field v-model="loginForm.mobile" type="text" placeholder="请输入手机号码" label="手机号" required clearable :error-message="errors[0]" /> <!-- van-field通过:error-message接收、显示校验错误信息 --> </ValidationProvider> <ValidationProvider name="验证码" rules="required" v-slot="{ errors }"> <van-field v-model="loginForm.code" type="password" placeholder="请输入验证码" label="验证码" required clearable :error-message="errors[0]" /> <!-- 命名插槽应用,提示相关按钮,是要给van-field组件内部的slot去填充的 --> <van-button slot="button" size="small" type="primary">发送验证码</van-button> </van-field> </ValidationProvider> </van-cell-group> …… <script> // import导入需要的模块 ValidationProvider,并components私有方式注册 import { ValidationProvider } from 'vee-validate' export default { name: 'user-login', components: { // 注册 ValidationProvider }, } </script>
此时已经可以实现校验,但是默认错误信息是英文的:
v-slot说明
: https://blog.csdn.net/liushijun_/article/details/92186739
https://www.cnblogs.com/qhantime/p/11410073.html
之前使用slot-scope接收子组件作用域插槽的数据信息,在vue新版本中,可以通过v-slot接收作用域插槽数据,格式就是
v-slot="数据名称"
。slot-scope="stData"
{{stData.errors[0]}}
表现具体校验失败错误信息。
形式上:v-slot="stData"
slot-scope="stData"
就是一样的。v-slot="{errors}"
对象解构赋值errors[0]
v-slot="stData"
{{stData.errors[0]}}
当前校验部分,errors[0] 可以访问到校验失败的错误信息,固定用法。
v-slot和slot-scope的区别
:-
v-slot 只能被用在 组件标签 或 template 标签身上
-
slot-scope 可以被应用在 组件标签 、普通html标签、template标签 上
<template slot-scope="stData"></template> <template v-slot="stData"></template>
-
-
设置提示语言(默认是英文提示)
对 src/utils/validate.js 文件内容继续丰富信息,引入localize、zh_CN.js、注册中文、使用中文:
// 1. 导入localize模块函数 import { extend, localize } from 'vee-validate' // 导入全部的规则 import * as rules from 'vee-validate/dist/rules' // 2.导入要使用的语言 import zhCN from 'vee-validate/dist/locale/zh_CN.json' // 3.对导入好的语言做注册 localize({ // 对象成员简易赋值 zhCN }) // 4. 使用具体的语言 localize('zhCN') // 遍历、注册全部的规则 Object.keys(rules).forEach(rule => { extend(rule, rules[rule]) })
经过上述4个步骤,现在语言就是中文的:
-
自定义校验规则
在 src/utils/validate.js文件最后添加如下内容:
// 为校验手机号码,自定义规则 // phone:规则名称 // value:被校验的数据 extend('phone', { validate: value => { // return true 校验成功 // return false 校验失败 const reg = /^1[35789]\d{9}$/ // 正则校验手机号码 return reg.test(value) // 正则匹配目标内容,返回boolean }, // 校验失败的错误信息{_field_}代表被校验项目的name的名称 message: '{_field_}格式不正确' })
在手机号码表单域中使用上述校验规则:
<ValidationProvider v-slot="{errors}" rules="required|phone" name="手机号码">
效果
:
2. validate表单整体校验
- 登录动作发生时触发验证功能。
步骤
:
- 在 user/login.vue 中引入 注册 ValidationObserver 组件。
- 把全部的表单项目通过 ValidationObserver 组件圈选,并设置ref属性。
- 单击登录按钮后,使得 ValidationObserver 调用validate方法对全部表单项目进行校验。
示例代码
:
<!-- user/login.vue -->
<!-- 用ValidationObserver组件把全部的校验项目给包围起来
ref设置好,使得组件实例可以通过this.$refs.xx 的方式获得当前的组件对象 -->
<ValidationObserver ref="loginFormRef">
<ValidationProvider v-slot="{errors}" rules="required|phone" name="手机号码">
……
</ValidationProvider>
<ValidationProvider v-slot="{errors}" rules="required" name="密码">
……
</ValidationProvider>
</ValidationObserver>
import { ValidationProvider, ValidationObserver } from 'vee-validate'
……
components: {
ValidationProvider,
ValidationObserver
},
methods: {
// 登录系统
async login () {
// 对表单全部项目做校验,没有问题再向下执行
// ValidationObserver
// validate()返回promise对象
// valid=true 校验成功 valid=false 校验失败
const valid = await this.$refs.loginFormRef.validate()
if (!valid) {
// 校验失败,停止后续代码执行
return false
}
// 调用api,校验账号信息有效,如下api请求有可能【成功】,还有可能【失败】
try {
const result = await apiUserLogin(this.loginForm)
// console.log(result) // {token:xx,refresh_token:xx}
// 通过vuex维护服务器端返回的token等秘钥信息
this.$store.commit('updateUser', result)
this.$toast.success('登录成功')
// 页面跳转
this.$router.push('/')
} catch (err) {
// 错误信息提示 vant组件库方法
this.$toast.fail('手机号或验证码错误' + err)
}
}
}
注意
:
- validate()方法调用完毕会返回 Promise对象结果,需要通过await修饰使用。