VUE开发--验证框架(四十九)

一、vuelidate

Vuelidate是一款简单轻量级的基于模块的Vue.js验证插件。

1. 安装

npm install vuelidate --save
npm i -S vuelidate               //简写

2. 在main.js中导入库并用作Vue插件，以便在包含验证配置的所有组件上全局启用该功能：

import Vue from 'vue'
import Vuelidate from 'vuelidate'

Vue.use(Vuelidate)//安装插件

3. 内置验证规则
   required: 需要非空数据。检查仅包含空格的空数组和字符串。
   maxLength:要求输入具有最大指定长度（包括最大值）。适用于数组。
   minLength:要求输入具有最小指定长度（包括最小值）。适用于数组。
   email: 接受有效的电子邮件地址。请记住，您仍然需要在服务器上进行仔细验证，因为无法发送验证电子邮件地址是否是真实的。
   between: 检查数字或日期是否在指定范围内。最小值和最大值都包括在内。
   ipAddress: 接受点分十进制表示形式的有效IPv4地址，如127.0.0.1。
   alpha: 只接受字母字符。
   alphaNum: 只接受字母数字。
   numeric: 只接受数字。
   sameAs: 检查给定属性是否相等。
   url: 只接受网址。
   or: 当至少有一个提供的验证器通过时通过。
   and: 所有提供的验证器都通过时通过。
   requiredIf: 仅当提供的属性或谓词为真时才需要非空数据。
   requiredUnless: 仅当提供的属性或谓词为假时才需要非空数据。
   minValue: 要求输入具有指定的最小数值或日期。
   maxValue: 要求输入具有指定的最大数值或日期。

自定义验证规则（Custom Validators）

除了使用Vuelidate自带的内置验证规则外还可以使用自定义规则满足需求。
最简单的方法就是直接在当前文件的script里面设置校验规则，当然也可以单独的写一个my-validators.js的文件，无论是单独写还是抽离出来都需要引入.详情请参考 vuelidate的自定义验证规则

import { regex } from 'vuelidate/lib/validators/common'
或者
import { helpers } from 'vuelidate/lib/validators'

例子：
register.vue

//1. 先引入需要用到的验证规则
import { required, maxLength, sameAs } from 'vuelidate/lib/validators'
import { regex } from 'vuelidate/lib/validators/common'
var phone = regex('phoneNumber', /^1(3|4|5|7|8)\d{9}$/) // 手机号码校验

export default {
    data () {
        return {
            user: {
                username: '',
                password: '',
                confirmPassword: '',
                phone: '',
                phoneCode: ''
            }
        }
    },
    // 2.定义验证字段的规则
    validations: {
        user: {
            username: {
                required,
                // minLength: minLength(2),
                maxLength: maxLength(20),
                async isUnique (value) { // 异步校验用户名是否已注册
                    if (value === '') return true
                    const response = await fetch(`/api/unique/name/${value}`)
                    return Boolean(await response.json())
                }
            },
            password: {
                required
            },
            confirmPassword: {
                sameAsPassword: sameAs('password') // 校验密码是否一致
            },
            phone: {
                required,
                phone  // 直接就是用的上面const设置的校验规则，自定义校验
            },
            phoneCode: {
                required
            }
        }
    }
}

register.vue的html部分

    
    密码不能为空


    
    两次输入的密码不一致


    
    手机号码不能为空
    请输入正确的手机号码

Register.vue的css部分

/* 表单验证样式 */
.form-group__message{
    display: none;
    font-size: 12px;
    color: #CC3333;
}
.form-group--error > input + .form-group__message {
    display: block;
    color: #CC3333;
}
.form-group--error input, .form-group--error input:focus, .form-group--error input:hover, .form-group--error textarea {
    border-color: #CC3333;
}

二、vee-validate

https://baianat.github.io/vee-validate/

1. 安装

npm install vee-validate --save

2. 引入

import Vue from "vue";
import VeeValidate, { Validator } from "vee-validate";
Vue.use(VeeValidate);

3. vant页面中使用

mobile自定义验证代码，常用的正则表达式。https://form-validate.github.io/form-validate/
汉化:

import Vue from "vue";
import VeeValidate, { Validator } from "vee-validate";

Vue.use(VeeValidate);

const formatFileSize = function(size) {
  let units = ["Byte", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
  let threshold = 1024;
  size = Number(size) * threshold;
  let i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(threshold));
  return (size / Math.pow(threshold, i)).toFixed(2) * 1 + " " + units[i];
};
const fieldName = ""; //原来的i18n的fieldName会显示绑定的name值，就是英文，实际项目中不需要

Validator.localize("zh_CN", {
  name: "zh_CN",
  attributes: {},
  messages: {
    _default: () => `${fieldName}无效`,
    after: (field, [target]) => `${fieldName}必须在${target}之后`,
    alpha_dash: () => `${fieldName}能够包含字母数字字符、破折号和下划线`,
    alpha_num: () => `${fieldName}只能包含字母数字字符`,
    alpha_spaces: () => `${fieldName}只能包含字母字符和空格`,
    alpha: () => `${fieldName}只能包含字母字符`,
    before: (field, [target]) => `${fieldName}必须在${target}之前`,
    between: (field, [min, max]) => `${fieldName}必须在${min}与${max}之间`,
    confirmed: (field, [confirmedField]) =>
      `${fieldName}不能和${confirmedField}匹配`,
    credit_card: () => `${fieldName}格式错误`,
    date_between: (field, [min, max]) => `${fieldName}必须在${min}和${max}之间`,
    date_format: (field, [format]) => `${fieldName}必须符合${format}格式`,
    decimal: (field, [decimals = "*"] = []) =>
      `${fieldName}必须是数字，且能够保留${
        decimals === "*" ? "" : decimals
      }位小数`,
    digits: (field, [length]) =>
      `${fieldName}必须是数字，且精确到${length}位数`,
    dimensions: (field, [width, height]) =>
      `${fieldName}必须在${width}像素与${height}像素之间`,
    email: () => `${fieldName}不是一个有效的邮箱`,
    ext: () => `${fieldName}不是一个有效的文件`,
    image: () => `${fieldName}不是一张有效的图片`,
    included: () => `${fieldName}不是一个有效值`,
    integer: () => `${fieldName}必须是整数`,
    ip: () => `${fieldName}不是一个有效的地址`,
    length: (field, [length, max]) => {
      if (max) {
        return `${fieldName}长度必须在${length}到${max}之间`;
      }
      return `${fieldName}长度必须为${length}`;
    },
    max: (field, [length]) => `${fieldName}不能超过${length}个字符`,
    max_value: (field, [max]) => `${fieldName}必须小于或等于${max}`,
    mimes: () => `${fieldName}不是一个有效的文件类型`,
    min: (field, [length]) => `${fieldName}必须至少有${length}个字符`,
    min_value: (field, [min]) => `${fieldName}必须大于或等于${min}`,
    excluded: () => `${fieldName}不是一个有效值`,
    numeric: () => `${fieldName}只能包含数字字符`,
    regex: () => `${fieldName}格式无效`,
    required: () => `${fieldName}不能为空`,
    size: (field, [size]) => `${fieldName}必须小于${formatFileSize(size)}`,
    url: () => `${fieldName}不是一个有效的url`
  }
});

// 手机号码验证
Validator.extend("mobile", {
  getMessage: () => `请输入正确的手机号码`,
  validate: value =>
    value.length === 11 &&
    /^(((13[0-9]{1})|(14[57]{1})|(15[012356789]{1})|(17[03678]{1})|(18[0-9]{1})|(19[89]{1})|(16[6]{1}))+\d{8})$/.test(
      value
    )
});

4. 普通标签使用
   main.js

import zh_CN from "vee-validate/dist/locale/zh_CN";
Validator.localize("zh_CN", zh_CN);

// 手机号码验证
Validator.extend("mobile", {
  getMessage: () => `请输入正确的手机号码`,
  validate: value =>
    value.length === 11 &&
    /^(((13[0-9]{1})|(14[57]{1})|(15[012356789]{1})|(17[03678]{1})|(18[0-9]{1})|(19[89]{1})|(16[6]{1}))+\d{8})$/.test(
      value
    )
});

HTML:

    
    {{ errors.first('mobile') }}

进行验证：
this.$validator.validateAll()校验所有,只要有一个校验失败了，就返回false

  this.$validator.validateAll().then(result => {
        //如果验证成功为true
        if (result) {
   
        }
      });