序言:在市场上有许多表单验证插件,他们的工作方式不尽相同,在这里来介绍比较流行的 vee-validate
第一步 创建新的js文件 validate.js ,并在 main.js中引用
//引用表单验证 插件
import "@/units/validate"
第二步 插件的安装
cnpm i vee-validate@2 -save 安装的插件安装2版本的
第三步 进行引入插件 和vue ,且引用中文版 并进行挂载
//引用vue
import Vue from 'vue'
//引用插件
import VeeValidate from 'vee-validate'
// // 引入中文 message 这样提示就是 中文的提示信息
import zh_CN from 'vee-validate/dist/locale/zh_CN'
Vue.use(VeeValidate, {
//失却焦点进行表单验证
events: 'blur'
})
第四步 提示信息
VeeValidate.Validator.localize('zh_CN', {
messages: {
...zh_CN.messages,
is: (field) => `${field}必须与密码相同` // 修改内置规则的 message,让确认密码和密码相同
},
attributes: { // 给校验的 field 属性名映射中文名称
phone: '手机号',
code: '验证码',
password: '密码',
repassword: '确认密码',
isCheck: '协议'
}
})
第五步 基本使用
<div class="content">
<label>手机号:</label>
<!--
验证规则,里面书写正则
v-validate="{ required: true, regex: /^1\d{10}$/ }"
里面动态添加类名,将英文与中文进行替换
:class="{ invalid: errors.has('phone') }"
-->
<input
type="text"
placeholder="请输入你的手机号"
v-model="phone"
name="phone"
v-validate="{
required: true,
regex:
/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
}"
:class="{ invalid: errors.has('phone') }"
/>
<!-- 验证提示的信息 -->
<span class="error-msg">{{ errors.first("phone") }}</span>
</div>
剩下的诸如此类书写
但会碰到,要求确认密码的情况
<div class="content">
<label>确认密码:</label>
<input
type="text"
placeholder="请输入确认密码"
v-model="repassword"
name="repassword"
v-validate="{ required: true, is: password }"
:class="{ invalid: errors.has('password') }"
/>
<!-- is:password 的意思就是 要与password输入的值相同 -->
<span class="error-msg">{{ errors.first("repassword") }}</span>
</div>
在所有情况验证完成时,我们要判断用户所输入的值是否都符合条件,如果都符合条才进行下一步
//全部表单验证 全部验证成功时才返回为真
//await 返回成功的结果,必须搭配 async 使用
const success = await this.$validator.validateAll();