50.（了解）表单校验插件
说明
(1) 项目中有一些如注册/登陆表单, 在提交请求前是需要进行表单输入数据校验的
(2) 只有前台表单验证成功才会发请求
(3) 如果校验失败, 以界面红色文本的形式提示, 而不是用alert的形式
(4) 校验的时机, 除了点击提交时, 还有输入过程中实时进行校验
安装命令：cnpm install --save vee-validate@2
版本兼容：
使用步骤：
- 安装插件
- 在src/main.js引入表单校验插件
//引入表单校验插件
import "@/plugins/validate";
- 在plugins文件夹下新建validates.js文件，配置校验规则
//vee-validate插件：表单验证区域’
import Vue from "vue";
import VeeValidate from "vee-validate";
//中文提示信息
import zh_CN from "vee-validate/dist/locale/zh_CN";
Vue.use(VeeValidate);
//表单验证
VeeValidate.Validator.localize("zh_CN", {
messages: {
...zh_CN.messages,
is: (field) => `${field}必须与密码相同`, // 修改内置规则的 message，让确认密码和密码相同
},
attributes: {
phone: "手机号",
code: "验证码",
password: "密码",
passwordConfirm: "确认密码",
checkedAgreement:'协议'
},
});
//自定义校验规则
VeeValidate.Validator.extend("tongyi", {
validate: (value) => {
return value;
},
getMessage: (field) => field + "必须同意",
});
- 在需要校验的组件内使用，主要添加v-validate、:class、errors.has、errors.first，另外方法再加入一行判断是否全部交验通过的操作
<input placeholder="请输入你的手机号" v-model="phone" name="zai" v-validate="{ required: true, regex: /^1\d{10}$/ }" :class="{ invalid: errors.has('phone') }"
/>
<span class="error-msg">{
{ errors.first("phone") }}</span>
const success = await this.$validator.validateAll();
if (success) {
...
}
修改代码：
src/main.js
//引入表单校验插件
import "@/plugins/validate";
src/plugins/validate.js
//vee-validate插件：表单验证区域’
import Vue from "vue";
import VeeValidate from "vee-validate";
//中文提示信息
import zh_CN from "vee-validate/dist/locale/zh_CN";
Vue.use(VeeValidate);
//表单验证
VeeValidate.Validator.localize("zh_CN", {
messages: {
...zh_CN.messages,
is: (field) => `${field}必须与密码相同`, // 修改内置规则的 message，让确认密码和密码相同
},
attributes: {
phone: "手机号",
code: "验证码",
password: "密码",
passwordConfirm: "确认密码",
checkedAgreement:'协议'
},
});
//自定义校验规则
VeeValidate.Validator.extend("tongyi", {
validate: (value) => {
return value;
},
getMessage: (field) => field + "必须同意",
});
src/pages/Register/index.vue
<div class="content">
<label>手机号:</label>
<input placeholder="请输入你的手机号" v-model="phone" name="zai" v-validate="{ required: true, regex: /^1\d{10}$/ }" :class="{ invalid: errors.has('phone') }"
/>
<span class="error-msg">{
{ errors.first("phone") }}</span>
</div>
<div class="content">
<label>验证码:</label>
<input placeholder="请输入你的验证码" v-model="code" name="code" v-validate="{ required: true, regex: /^\d{6}$/ }" :class="{ invalid: errors.has('code') }"
/>
<button style="width:100px;height:38px" @click="getCode">
获取验证码
</button>
<span class="error-msg">{
{ errors.first("code") }}</span>
</div>
<div class="content">
<label>登录密码:</label>
<input placeholder="请输入你的密码" v-model="password" name="password" v-validate="{ required: true, regex: /^[0-9A-Za-z]{8,20}$/ }" :class="{ invalid: errors.has('password') }"
/>
<span class="error-msg">{
{ errors.first("password") }}</span>
</div>
<div class="content">
<label>确认密码:</label>
<input placeholder="请输入确认密码" v-model="passwordConfirm" name="passwordConfirm" v-validate="{ required: true, is: password }" :class="{ invalid: errors.has('passwordConfirm') }"
/>
<span class="error-msg">{
{ errors.first("passwordConfirm") }}</span>
</div>
<div class="controls">
<input type="checkbox" v-model="checkedAgreement" name="checkedAgreement" v-validate="{ required: true, tongyi: true }" :class="{ invalid: errors.has('checkedAgreement') }"
/>
<span>同意协议并注册《尚品汇用户协议》</span>
<span class="error-msg">{
{ errors.first("checkedAgreement") }}</span>
</div>
async registerUser() {
try {
//成功
const success = await this.$validator.validateAll();
//全部表单验证成功，在向服务器发请求，进行祖册
//只要有一个表单没有成功，不会发请求
if (success) {
const {phone, code, password, passwordConfirm} = this
await this.$store.dispatch('registerUser', {phone, password, code})
//注册成功进行路由的跳转
this.$router.push('/login')
}
} catch (error) {
//失败
alert(error.message)
}
},
注意点0：这个插件只了解即可，因为查看github发现使用规则还很复杂不易用且不容易记住，后续可以使用饿了吗element校验规则。
注意点1：该插件注意版本兼容，比如VUE2还是VUE3。
注意点2：
问题：form表单中为啥要有name属性？
答案：为了区分不同的标签元素。
注意点3：errors.has、errors.first里面的字符串一定要和data中定义的属性名一致。
注意点4：validate.js文件中引入import zh_CN from "vee-validate/dist/locale/zh_CN";是因为该插件默认显示英文错误提示信息，引入语言后就自动转换为中文了。
注意点5：attributes中的属性就是对应组件内data定义的属性名称，默认显示data属性名，所以需要转义，这里定义中文，就会进行相应解析转换的。
注意点6：validate.js文件中可以自定义校验规则，比如勾选框的“tongyi”
注意点7：注册方法一定要记得加const success = await this.$validator.validateAll();，它就用来代表表单校验规则是否全部通过的。
本人其他相关文章链接
1.vue尚品汇商城项目-day07【44.个人中心二级路由搭建+45.我的订单+46.优化登录跳转+47.独享守卫】
2.vue尚品汇商城项目-day07【vue插件-48.（了解）图片懒加载插件】
3.vue尚品汇商城项目-day07【vue插件-49.（了解）自定义插件】
4.vue尚品汇商城项目-day07【vue插件-50.（了解）表单校验插件】
5.vue尚品汇商城项目-day07【51.路由懒加载】
6.vue尚品汇商城项目-day07【52.打包文件，处理map文件】
7.vue尚品汇商城项目-day07【53.nginx反向代理配置】
8.vue尚品汇商城项目-day07【vue插件-54.（了解）生成二维码插件】
9.vue尚品汇商城项目-day07【55.编码测试与打包发布项目】
