vue表单校验vee-validate

下面介绍一款vue中的表单校验插件。

一、安装

npm install vee-validate --save-dev

二、配置

vee-validate默认是英文提示的校验，我们需要把它配置成中文的。可以使用如下方法：

//validate.jsimport Vue from 'vue';import VeeValidate, {  Validator} from 'vee-validate';import zh_CN from 'vee-validate/dist/locale/zh_CN';//引入中文提示语言const dictionary = {  zh_CN};//校验的一些配置信息const config = {  errorBagName: 'errors2', // change if property conflicts.  fieldsBagName: 'fields',  delay: 0,  locale: 'zh_CN',  dictionary: null,  strict: true,  enableAutoClasses: false,  classNames: {    touched: 'touched', // the control has been blurred    untouched: 'untouched', // the control hasn't been blurred    valid: 'valid', // model is valid    invalid: 'invalid', // model is invalid    pristine: 'pristine', // control has not been interacted with    dirty: 'dirty' // control has been interacted with  },  events: 'input|blur',  inject: true};Validator.updateDictionary(dictionary);//更新配置Vue.use(VeeValidate, config);

这样我们便完成了中文提示的配置了。

三、简单使用

如下代码基于微信端ui框架vux

<x-input label-width='4rem' placeholder="请输入手机号" v-validate="'required'" name='手机号' v-model="mobile">              <i slot="label" class="iconfont icon-people"></i>            </x-input>            <span v-show="errors2.has('手机号') && submitted" class="errors-tip is-danger">{{ errors2.first('手机号') }}</span>

v-validate=“‘required’” 表示必填校验，name=’手机号’ name属性是必须得，这个是告诉vee-validate要校验的字段为手机号，同时也用于错误提示。v-show=”errors2.has(‘手机号’) && submitted” submitted是我们为校验设置的标志，比如提交时才显示错误内容。errors2.first(‘手机号’)表示显示手机号校验的第一个错误内容。

四、内置校验规则

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} - 值必须符合正则patternrequired - 不解释size:{kb} - 文件大小不超过url:{domain?} - (指定域名的)url

具体可参考官网vee-validate

五、自定义校验规则

内置规则往往是不够我们使用的，vee-validate提供十分简便的方法让我们扩展校验规则，可参考如下例子：

//配置验证规则const validateRules = {    mobile: {      messages: {//错误提示消息        zh_CN: field => '手机号码输入不正确',      },      validate: value => {//字段校验规则        return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)      }    },    idCard: {      messages: {        zh_CN: field => '身份证号码输入不正确',      },      validate: value => {        var reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;        //18位        var regs =          /^[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)$/;        return reg.test(value) || regs.test(value);      }    },    passWord: {      messages: {        zh_CN: field => '密码需为8-16位数字与字母组合',      },      validate: value => {        let reg1 = /\d+/;        let reg2 = /[a-zA-Z]/;        return value.length >= 8 && value.length <= 16 &&reg1.test(value) && reg2.test(value);      }    }  }  //添加验证规则Object.keys(validateRules).forEach((key) => {  Validator.extend(key, validateRules[key]);});

我们只需要添加将这段上文的validate.js便可以了。
然后在我们的main.js中将这个validate.js引入，便可以启动我们的校验了。