欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vee-validate vue 2.0自定义表单验证的实例

程序员文章站 2023-08-17 13:56:21
亲测可用 学习vee-validate,首先可以去阅读官方文档,更为详细可以阅读官网中的。 一、安装 您可以通过npm或通过cdn安装此插件。 1. npm...

亲测可用

学习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 vue 2.0自定义表单验证的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。