vee-validate vue 2.0自定义表单验证
2017-12-28 15:41
876 查看
vee-validate vue 2.0自定义表单验证
亲测可用学习vee-validate,首先可以去阅读官方文档,更为详细可以阅读官网中的规则。
一、安装
您可以通过npm或通过CDN安装此插件。
1. NPM
npm install vee-validate --save
2. CDN
<script src="path/to/vue.js"></script> <script src="path/to/vee-validate.js"></script> <script> Vue.use(VeeValidate); // good to go. </script>
或者你可以使用ES6导入它:
import Vue from 'vue'; import VeeValidate from 'vee-validate'; Vue.use(VeeValidate);
二、使用中文提示
没有配置过的错误提示默认使用英文显示的,如果想要用中文显示需要我们手动配置一下,首先还是在main.js中引入
import VeeValidate, {Validator} from 'vee-validate'; import cn from 'vee-validate/dist/locale/zh_CN'; Validator.localize('cn', cn);
三、修改默认的错误提示信息
// 修改默认错误提示 const dict = { cn: {messages: {required: (name) => `${name}不能为空!`}} // name接受alias的值. } Validator.localize(dict);
demo中修改了required的错误提示信息,因为使用的中文(前面引入的),所以是cn。最后用localize方法加入到Validator中。
四、使用自定义规则
Validator.extend('mobile', { getMessage: field => "请输入正确的手机号码", validate: value => value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value) });
extend的第一个参数就是自定义的规则的名字,可以像使用默认规则一样使用它,getMessage中是错误提示信息,validate是验证规则,返回一个布尔值或promise.
完整例子
<template>
<div class="">
<form @submit.prevent="applyCoupon" class="">
<label class="">手机号</label>
<p class="">
<input v-model="phone" name="phone" :class="" type="text"
placeholder="请输入手机号"><br>
<span v-show="errors.has('phone')" class="error">{{ errors.first('phone') }}</span>
</p>
<label class="">姓名</label>
<p class="">
<input v-model="name" name="name" :class="" type="text"
placeholder="请输入手机号"><br>
<span v-show="errors.has('name')" class="error">{{ errors.first('name') }}</span>
</p>
<p class="">
<button type="submit" class="" name="button">确定</button>
</p>
</form>
</div>
</template>
<script>
import VeeValidate, {Validator} from 'vee-validate'; import cn from 'vee-validate/dist/locale/zh_CN'; Validator.localize('cn', cn);
const dict = {
cn: {messages: {required: (name) => `${name}不能为空!`}}
}
Validator.localize(dict);
export default {
name: 'coupon-example',
validator: null,
data: () => ({
phone: '',
name: '',
errors: null
}),
computed: {},
methods: {
applyCoupon() { // 提交执行函数
this.validator.validate('name', this.name).then((result) => this.discounted = result);
this.validator.validate('phone', this.phone).then((result) => this.discounted = result);
}
},
created() {
this.validator = new Validator({});
Validator.extend('mobile', { getMessage: field => "请输入正确的手机号码", validate: value => value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value) });
Validator.extend('name', {
getMessage: field => "请输入正确姓名",
validate: value => value == 'tom'
});
this.validator.attach({name: 'name', rules: 'required|name', alias: '姓名'});
this.validator.attach({name: 'phone', rules: 'required|mobile', alias: '手机'});
// 使用attach以FieldOptions作为其第一个参数的方法添加验证规则。
this.$set(this, 'errors', this.validator.errors);
}
};
</script>
<style>
.error {
font-size: 12px;
color: #ff1c13;
}
</style>
第一次使用vee-validate,勿喷。有什么好的建议请联系博主邮箱
15517072173@163.com
相关文章推荐
- vee-validate vue 2.0自定义表单验证的实例
- vue表单验证 vee-validate
- vue 表单验证 vee-validate 简单使用
- Vue中使用vee-validate表单验证的方法
- Vue2.0表单校验组件vee-validate的使用详解
- 使用jquery.validate.min.js插件进行表单验证并自定义校验规则
- vue2.0 + ele的循环表单及验证字段方法
- vue中vee validate表单校验的几种基本使用
- Vue循环组件加validate多表单验证的实例
- jQuery插件Validate实现自定义表单验证
- jQuery.validator.addMethod自定义验证方法【在表单验证中的使用 $("#appEdit_Form").validate({rules : {},messages:{}】
- element-ui+vuex共享自定义方法进行表单验证 validator
- jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则
- 自定义表单输入验证jquery,validate,增加自己的方法,验证完并保存写入数据库
- jquery.validate.js之自定义表单验证规则
- jQuery Validate 表单验证插件----自定义校验结果样式
- 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑
- vue表单校验vee-validate
- jquery 自带表单验证 validate 自定义验证
- jQuery插件Validate实现自定义表单验证