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

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

说明

(1) 项目中有一些如注册/登陆表单, 在提交请求前是需要进行表单输入数据校验的

(2) 只有前台表单验证成功才会发请求

(3) 如果校验失败, 以界面红色文本的形式提示, 而不是用alert的形式

(4) 校验的时机, 除了点击提交时, 还有输入过程中实时进行校验

安装命令：cnpm install --save vee-validate@2

版本兼容：

使用步骤：

1. 安装插件
2. 在src/main.js引入表单校验插件

//引入表单校验插件
import "@/plugins/validate";

3. 在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 + "必须同意",
});

4. 在需要校验的组件内使用，主要添加v-validate、:class、errors.has、errors.first，另外方法再加入一行判断是否全部交验通过的操作

{{ errors.first("phone") }}

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

        手机号:
        
        {{ errors.first("phone") }}
      
      

        验证码:
        
        
          获取验证码
        
        {{ errors.first("code") }}
      
      

        登录密码:
        
        {{ errors.first("password") }}
      
      

        确认密码:
        
        {{ errors.first("passwordConfirm") }}
      
      

        
        同意协议并注册《尚品汇用户协议》
        {{ errors.first("checkedAgreement") }}
      
      
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();，它就用来代表表单校验规则是否全部通过的。