本文为vue2简单使用vee-validate表单验证的记录
第一步:安装vee-validate@2插件
cnpm install --save vee-validate@2
第二步创建:utils/validate.js
并在入口文件main.js引入
import '@/utils/validate'
import VeeValidate from 'vee-validate';
import Vue from 'vue';
//中文提示信息
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("agree", {
validate: (value) => {
return value;
},
getMessage: (field) => field + "必须同意",
});
第三步:使用这个插件进行表单验证
template中：
//验证手机号：
<input type="text" placeholder="请输入你的手机号"
v-model="phone" name="phone" v-validate="{required:true,regex:/^\d{11}$/}"/>
//refgex 中为正则表达式
<span class="error-msg">{{ errors.first("phone") }}</span>//展示错误信息
//验证是否勾选
<input
type="checkbox"
v-model="agree"
name="agree"
v-validate="{ required: true, agree: true }"/>
<span>同意协议并注册《尚品汇用户协议》</span>
<span class="error-msg">{{ errors.first("agree") }}</span>
//验证两次密码是否相同
<input
type="text"
placeholder="请输入确认密码"
v-model="password1"
name="password1"
v-validate="{ required: true, is: password }"/>
<span class="error-msg">{{ errors.first("password1") }}</span>
最后提交时确认所有表单都已合规的方法
const success = await this.$validator.validateAll();
success为一个布尔值可用于验证是否全部合规
最后放一个使用表单验证代码案例
<template>
<div class="register-container">
<!-- 注册内容 -->
<div class="register">
<h3>
注册新用户
<span class="go">我有账号，去 <a>登陆</a> </span>
</h3>
<!--手机号码-->
<div class="content">
<label>手机号:</label>
<!-- 人家提供一个全局指令v-validate -->
<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}$/,
}"
/>
<span class="error-msg">{{ errors.first("phone") }}</span>
</div>
<!--验证码-->
<div class="content">
<label>验证码:</label>
<input
type="text"
placeholder="请输入验证码"
v-model="code"
name="code"
v-validate="{ required: true, regex: /^\d{6}$/ }"
/>
<button style="width: 100px; height: 38px" @click="getCode">
获取验证码
</button>
<span class="error-msg">{{ errors.first("code") }}</span>
</div>
<!--登录密码-->
<div class="content">
<label>登录密码:</label>
<input
type="text"
placeholder="请输入你的登录密码"
v-model="password"
name="password"
v-validate="{
required: true,
regex:
/^(?![A-Za-z0-9]+$)(?![a-z0-9#?!@$%^&*-.]+$)(?![A-Za-z#?!@$%^&*-.]+$)(?![A-Z0-9#?!@$%^&*-.]+$)[a-zA-Z0-9#?!@$%^&*-.]{8,16}$/,
}"
/>
<span class="error-msg">{{ errors.first("password") }}</span>
</div>
<!--确定密码-->
<div class="content">
<label>确认密码:</label>
<input
type="text"
placeholder="请输入确认密码"
v-model="password1"
name="password1"
v-validate="{ required: true, is: password }"
/>
<span class="error-msg">{{ errors.first("password1") }}</span>
</div>
<div class="controls">
<input
type="checkbox"
v-model="agree"
name="agree"
v-validate="{ required: true, agree: true }"
/>
<span>同意协议并注册《用户协议》</span>
<span class="error-msg">{{ errors.first("agree") }}</span>
</div>
<div class="btn">
<button @click="register">完成注册</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Register",
data() {
return {
//手机手机号
phone: "",
//手机验证码
code: "",
//密码
password: "",
//确认密码
password1: "",
//协议同意
agree: true,
};
},
methods: {
//获取验证码按钮回调
async getCode() {
//获取手机号码
const { phone } = this;
//目前不做表单验证功能:保证手机号码十一位
if (phone.length == 11) {
try {
//获取验证码成功
await this.$store.dispatch("user/getCode", phone);
this.code = this.$store.state.user.code;
} catch (error) {
alert("获取验证码失败");
}
}
},
//注册按钮
async register() {
//点击注册按钮的时候全部表单验证通过再去发请求
const success = await this.$validator.validateAll();
//success:返回是布尔值 真【全部字段验证通过】|假[只要有一个字段验证失败返回false]
if (success) {
try {
//注册成功
await this.$store.dispatch("user/register", {
phone,
code,
password,
});
//跳转到登录页
this.$router.push({ path: "/login" });
} catch (error) {
alert(error);
}
}else{
alert('大兄弟好好看看,还有红色那');
}
},
},
};
</script>
