VeeValidate——vue2.0表单验证插件

时间:2024-03-12 10:13:36

一、vee-validate入门

  vee-validate 是一个轻量级的 vue表单验证插件。它有很多开箱即用的验证规则,也支持自定义验证规则。它是基于模板的,因此它与HTML5验证API类似且熟悉。可以验证HTML5输入以及自定义Vue组件。

  项目地址:vee-validate

  官方文档:VeeValidate

1、安装

# NPM安装
$ npm install vee-validate --save

# CDN安装
<!-- jsdelivr cdn -->
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>

<!-- unpkg -->
<script src="https://unpkg.com/vee-validate@latest"></script>

2、引用

(1)方法一:在main.js中添加

  这里使用的是ES6/ES2015语法。ES2015语法是从ES5的一次巨大飞跃,它给JavaScript增加了大量的功能特性。

import Vue from \'vue\'
import axios from \'axios\'
import VeeValidate, {Validator} from \'vee-validate\';
import veeMessage from \'vee-validate/dist/locale/zh_CN\';

// 添加表单验证
Vue.use(VeeValidate, {
  classes: true,
  classNames: {
    valid: \'is-valid\',
    invalid: \'is-invalid\'
  }
});

// 使用中文提示
Validator.localize(\'zh_CN\', veeMessage);

  zh_CN是从 node_module/vee-validate/dist/locale目录下拷贝到项目中的中文语言包。

(2)方法二:直接包含脚本

<script src="path/to/vue.js"></script>
<script src="path/to/vee-validate.js"></script>
<script>
  Vue.use(VeeValidate); // good to go.
</script>

3、基本使用

  只需要将 v-validate 指令添加到要验证的输入中,并确保输入中包含生成错误消息的 name 属性。然后,向指令传递一个 rules 字符串,其中包含由管道 ‘|’ 分隔的验证规则列表。

<input v-validate="\'required|email\'" name="email" type="text">

  在上面示例中, required 表明该字段是必须的,email 则表示该字段必须为电子邮件。因此使用结合这两个规则,声明字符串变量 required|emailv-validate 表达式的值。

  如果要显示错误信息,只需使用 errors.first 方法获取该字段生成的第一个错误:

<span>{{ errors.first(\'email\') }}</span>

  但是需要注意:客户端验证永远不能替代服务器验证,确保在后端验证用户的任何输入。

  提醒:错误信息里面的名称通常就是表单的name属性,除非是通过Vue实例传递进去的。

  提醒:养成习惯,给每个field添加 name 属性,如果没有 name 属性又没有对值进行绑定的话,validator 可能不会对其进行正确校验。

二、显示错误

  errors是组件内置的一个数据模型,用来存储和处理错误信息。默认情况下,错误包实例将注入组件 errors 名称下的计算属性中,可以对其进行自定义以避免与其他 库/组件 发送冲突。

1、显示单个错误消息

  希望一次为字段显示一个错误,使用 errors.first(\'fieldName\') 方法执行此操作。

<input type="text" name="fieldName" v-validate="\'required\'">
<span>{{ errors.first(\'fieldName\') }}</span>

  VeeValidate 默认每个字段仅生成一条消息,因为它在运行验证管道时使用快速退出策略。当检测到第一个失败规则时,它将生成消息并将其存储在错误包实例中,然后忽略其他规则结果。

  要禁用此行为,需要 fastExit 在 VeeValidate的配置中 配置选项或使用 continues 修饰符。

2、显示多条错误消息

  通常应用场景是允许用户一次修复多个输入错误。errors.collect(\'fieldName\') 方法可以将特定字段的所有错误消息收集到数组中。

<input type="text" name="fieldName" v-validate.continues="\'required|alpha|min:5\'">
<ul>
  <li v-for="error in errors.collect(\'fieldName\')">{{ error }}</li>
</ul>

3、显示所有错误

  如果需要在表单上显示所有字段错误,尤其是非常大的表单。

(1)错误列表

  可以使用 errors.all() 将所有字段错误收集到单个平面数组中。

<input type="text" name="first" v-validate.continues="\'required|alpha|min:5\'">
<input type="text" name="second" v-validate.continues="\'required|alpha|min:5\'">
<ul>
  <li v-for="error in errors.all()">{{ error }}</li>
</ul>

(2)按字段名称分组

  使用 erros.collect() 按字段名称对错误消息进行分组,其中键是字段名称,值是每个字段的错误消息数组:

<input type="text" name="first" v-validate.continues="\'required|alpha|min:5\'">
<input type="text" name="second" v-validate.continues="\'required|alpha|min:5\'">
<ul>
  <li v-for="group in errors.collect()">
    <ul>
      <li v-for="error in group">{{ error }}</li>
    </ul>
  </li>
</ul>

三、内置的验证规则

1、内置验证规则汇总

after{target} - 比target要大的一个合法日期,格式(DD/MM/YYYY)
alpha - 只包含英文字符
alpha_dash - 可以包含英文、数字、下划线、破折号
alpha_num - 可以包含英文和数字
before:{target} - 和after相反
between:{min},{max} - 在min和max之间的数字
confirmed:{target} - 必须和target一样
date_between:{min,max} - 日期在min和max之间
date_format:{format} - 合法的format格式化日期
decimal:{decimals?} - 数字,而且是decimals进制
digits:{length} - 长度为length的数字
dimensions:{width},{height} - 符合宽高规定的图片
email - 不解释
ext:[extensions] - 后缀名
image - 图片
in:[list] - 包含在数组list内的值
ip - ipv4地址
max:{length} - 最大长度为length的字符
mimes:[list] - 文件类型
min - max相反
mot_in - in相反
numeric - 只允许数字
regex:{pattern} - 值必须符合正则pattern
required - 不解释
size:{kb} - 文件大小不超过
url:{domain?} - (指定域名的)url

2、内置规则使用示例

<input type="text" class="form-control" id="tel" v-model="queryInfo.tel" placeholder="手机号码"
    v-validate="\'min:11|max:11|numeric\'" name="tel" data-vv-as="手机号码">

<input type="text" class="form-control" id="idNum" v-model="queryInfo.idNumCipher" placeholder="身份证号"
    v-validate="\'required|max:18|min:18|alpha_num\'" name="idNum" data-vv-as="身份证号">

<input type="text" class="form-control" id="emailnum" v-model="queryInfo.email" placeholder="电子邮箱"
    v-validate="\'email\'" name="emailnum" data-vv-as="电子邮箱">

  如果使用了 data-vv-as 属性,在输入生成任何错误消息时,它将使用 data-vv-as 值而不是实际的字段名称。

  这样对于简单设置和显示本地化名称非常有用,但仅适用于单一语言环境页面。

四、自定义验证规则

1、直接定义

const validator = (value, args) => {
    // Return a Boolean or a Promise.
}
//最基本的形式,只返回布尔值或者Promise,带默认的错误提示

2、对象形式

const validator = {
    getMessage(field, args) { // 添加到默认的英文错误消息里面
        // Returns a message.
    },
    validate(value, args) {
        // Returns a Boolean or a Promise.
    }
};

3、添加到指定语言的错误消息

const validator = {
    messages: {
        en: (field, args) => {
            // 英文错误提示
        },
        cn: (field, args) => {
            // 中文错误提示
        }
    },
    validate(value, args) {
        // Returns a Boolean or a Promise.
    }
};

  创建了规则之后,用extend方法添加到Validator里:

import { Validator } from \'vee-validate\';
const isMobile = {
    messages: {
        en:(field, args) => field + \'必须是11位手机号码\',
    },
    validate: (value, args) => {
       return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
    }
}
Validator.extend(\'mobile\', isMobile);

//或者直接

Validator.extend(\'mobile\', {
    messages: {
      en:field => field + \'必须是11位手机号码\',
    },
    validate: value => {
      return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
    }
}); 

  然后可以直接把mobile当成内置规则使用:

<input v-validate data-rules="required|mobile" :class="{\'input\': true, \'is-danger\': errors.has(\'mobile\') }" name="mobile" type="text" placeholder="Mobile">
<span v-show="errors.has(\'mobile\')" class="help is-danger">{{ errors.first(\'mobile\') }}</span>

4、自定义内置规则的错误信息

import { Validator } from \'vee-validate\';

const dictionary = {
    en: {
        messages: {
            alpha: () => \'Some English Message\'
        }
    },
    cn: {
        messages: {
            alpha: () => \'对alpha规则的错误定义中文描述\'
        }
    }
};

Validator.updateDictionary(dictionary);

5、常用自定义规则

Validator.localize(\'zh_CN\', veeMessage);

// 自定义身份证号码验证
Validator.extend(\'idCardNum\', {
  getMessage: field => \'请输入正确的身份证号码\',
  // 身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X
  validate: value => /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value)
});

// 自定义手机号码验证
Validator.extend(\'mobile\', {       // extend的第一个参数就是自定义的规则的名字
  getMessage: field => \'请输入正确的手机号码\',       // getMessage中是错误提示信息
  validate: value => value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)    // validate是验证规则,返回一个布尔值或promise
});

// 自定义敏感词过滤
const sensitiveWordRule = {
  getMessage: (field, args) => field + \'敏感字段\',
  validate: (value, args) => {
    let sensitiveMap = makeSensitiveMap(sensitiveWordList);
    console.log(\'sensitivemap\', sensitiveMap);
    if (checkSensitiveWord(sensitiveMap, value).length > 0) {
      console.log(checkSensitiveWord(sensitiveMap, value))
      return false;
    } else {
      console.log(checkSensitiveWord(sensitiveMap, value))
      return true;
    }
  }
};

Validator.extend(\'sensitiveWordFilter\', sensitiveWordRule);

6、与相关组件配合验证

  针对Enums和Select(src/components/chart/Select2.vue)验证:

// 自定义 Enmus 验证
Validator.extend(\'enums\', {       // extend的第一个参数就是自定义的规则的名字
  validate: value => value > 0 && value != null && value != undefined    // validate是验证规则,返回一个布尔值或promise
});

// 自定义 Select2 验证
Validator.extend(\'select2\', {       // extend的第一个参数就是自定义的规则的名字
  getMessage: field => field + \'不能为空\',
  validate: value => value > 0 && value != null && value != undefined    // validate是验证规则,返回一个布尔值或promise
});

  针对 Datepicker 验证:

// 自定义时间区间选择组件 Datepicker 验证 -- 起止时间验证
Validator.extend(\'datepickerwrongrange\', {
  getMessage: field => \'起止时间不能相等\',
  validate: function (value) {
    var d = value.split(\'-\');
    var beginTime = parseInt(d[0]);
    var endTime = parseInt(d[1]);
    if(beginTime == endTime) {
      return false;
    }
    else {
      return true;
    }
  }
});

// 自定义时间区间选择组件 Datepicker 验证 -- 开始时间验证
Validator.extend(\'datepickerwrongbegin\', {
  getMessage: field => \'开始时间不能小于当前时间后的一小时\',
  validate: function (value) {
    var d = value.split(\'-\');
    var beginTime = parseInt(d[0]);
    var endTime = parseInt(d[1]);
    if(beginTime <= (Date.parse(new Date()) + 3600*1000)) {
      return false;
    }
    else {
      return true;
    }
  }
});