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();，它就用来代表表单校验规则是否全部通过的。

vue尚品汇商城项目-day07【vue插件-50.（了解）表单校验插件】

文章目录

50.（了解）表单校验插件

本人其他相关文章链接

猜你喜欢