z vee-validate表单验证插件使用
vue2
npm install --save vee-validate@2
// vee-validete插件：表单验证域
npm install --save vee-validate@2
// vee-validete插件：表单验证域
import Vue from 'vue';
import VeeValidate from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN.js'
Vue.use(VeeValidate);
// 表单验证
VeeValidate.Validator.localize('zh_CN', {
messages: {
...zh_CN.messages,
is: (field) => `${field}必须与密码相同`, // 判断密码是否一致
},
// 给检验的field 属性名映射中文名称
attributes: {
phone: "手机号",
code: '验证码',
password: '密码',
repassword: '确认密码',
agree: '协议'
}
})
// 自定义验证规则
VeeValidate.Validator.extend('agree', {
validate: (value) => {
return value;
},
messages: (field) => field + '必须同意!'
})
main.js
// vee-validate 验证插件
// vee-validate 验证插件
import '@/plugins/validate.js'
<label>手机号:</label>
<input
type="text"
placeholder="请输入你的手机号"
v-model="form.phone"
name="phone"
v-validate="{ required: true, regex: /^1\d{10}$/ }"
:class="{ invalid: errors.has('phone') }"
/>
<span class="error-msg">{{ errors.first("phone") }}</span>
<label>登录密码:</label>
<input
type="password"
placeholder="请输入你的登录密码"
v-model="form.password"
name="password"
v-validate="{ required: true, regex: /^\d{6,20}$/ }"
:class="{ invalid: errors.has('password') }"
/>
<span class="error-msg">{{ errors.first("password") }}</span>
<label>确认密码:</label>
<input
type="password"
placeholder="请输入确认密码"
v-model="form.repassword"
name="repassword"
v-validate="{ required: true, is: form.password }"
:class="{ invalid: errors.has('repassword') }"
/>
<span class="error-msg">{{ errors.first("repassword") }}</span>
<input
type="checkbox"
v-model="agree"
name="agree"
v-validate="{ required: true, is: true }"
:class="{ invalid: errors.has('agree') }"
/>
<span>同意协议并注册</span>
<span class="error-msg">{{ errors.first("agree") }}</span>
// 注册
async userRegister() {
const success = await this.$validator.validateAll();
if (success) {
try {
await this.$store.dispatch("userRegister", this.form);
this.$router.push("/login");
} catch (error) {
alert(error.message);
}
}
},
免责申明：
1. 本站所有教程、文章或资源分享目的仅供大家学习和交流！
2. 如有无法查看或链接失效，麻烦请报告联系管理员处理！
3. 本站无法保证资源或其时效性，恕不接受任何提问。
4. 在本站下载的源码严禁杜绝任何形式的正式商业用途，请去程序官方购买。 所有资料均来自于网络，版权归原创者所有！本站不提供任何保证，并不承担任何法律责任，如果对您的版权或者利益造成损害，请提供相应的资质证明，我们将于3个工作日内予以删除。
