表单验证vee-valadite

1.安装

 npm i vee-validate

2.在plugins文件夹中创建一个validate.js[专门注册vee-valadite],并注册插件

//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:{
    },
});

3.在入口文件需要引入执行一次

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

4.使用

 <input
          placeholder="请输入你的手机号"
          v-model="phone"
          name="phone"
          v-validate="{ required: true, regex: /^1\d{10}$/ }"
          :class="{ invalid: errors.has('phone') }"
        />
        <span class="error-msg">{{ errors.first("phone") }}</span>

示例

WeChat51c206297551d66c1f2a46545df623a2.png

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: "密码",
    password1: "确认密码",
    agree:'协议'
    },
});

//自定义校验规则
VeeValidate.Validator.extend("tongyi", {
    validate: (value) => {
      return value;
    },
    getMessage: (field) => field + "必须同意",
  });

Register.vue UI

    <div class="register">
      <h3>
        注册新用户
        <span class="go"
          >我有账号，去 <a @click="goLogin" target="_blank">登陆</a>
        </span>
      </h3>
      <div class="content">
        <label>手机号:</label>
        <input
          placeholder="请输入你的手机号"
          v-model="phone"
          name="phone"
          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="password1"
          name="password1"
          v-validate="{ required: true, is: password }"
          :class="{ invalid: errors.has('password1') }"
        />
        <span class="error-msg">{{ errors.first("password1") }}</span>
      </div>
      <div class="controls">
        <input
          type="checkbox"
          v-model="agree"
          name="agree"
          v-validate="{ required: true, tongyi: true }"
          :class="{ invalid: errors.has('agree') }"
        />
        <span>同意协议并注册《尚品汇用户协议》</span>
        <span class="error-msg">{{ errors.first("agree") }}</span>
      </div>
      <div class="btn" @click="register">
        <button>完成注册</button>
      </div>
    </div>

注册事件

 // 注册
    async register() {
      const success = await this.$validator.validateAll();
      //全部表单验证成功，在向服务器发请求，进行祖册
      //只要有一个表单没有成功，不会发请求
      if (success) {
      //处理注册逻辑
        try {
          const { phone, code, password, password1 } = this;
          this.$store.dispatch("userRegister", { phone, code, password });
          this.goLogin();
        } catch (error) {
          alert(error.message);
        }
      }
    },