veeValidate的使用

这是Vue的一个插件。js允许您以一种简单而强大的方式验证输入字段，并显示错误。
官方文档veeValidate

vue表单验证.png

安装

npm

npm install vee-validate --save

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);

中文的配置

我在网上搜了各种方法均无效
对了，如果cnpm install vee-validate --save没有出现语言包，可以试试这个

cnpm install  vee-validate@^2.0.0-rc.26  --save

必须加上版本号，这样才node_modules的文件下有个veeValidate文件夹，里面有个dist文件，不带版本号出现不了那个locale文件

语言包.png

我搜寻了几篇帖子使用vee-validate表单插件是如何设置中文提示？这篇是最靠谱的

首先安装i18n

cnpm install --save vue-i18n

然后在main.js里面引入

import VeeValidate from 'vee-validate';
import {Validator} from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN'  //加载语言包应该写成这个样子
import VueI18n from 'vue-i18n';
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: 'zh_CN',
})
Vue.use(VeeValidate, {
  i18n,
  i18nRootKey: 'validation',
  dictionary: {
    zh_CN
  }
});

在模板里面使用

  <div class="g-form-line">
             <span class="g-form-label">邮箱</span>
             <div class="g-form-input">
                 <input v-validate ="'required|email'" type="text" id="email" name="myEmail" :class="{'input': true, 'is-danger': errors.has('email') }">
             </div>
             <span v-show="errors.has('myEmail')" class="help is-danger">{{ errors.first('myEmail')}}</span>
          </div>

这样子中文就可以出现了

自定义消息

const dict = {
  messages:{
     required:()=>'这个是必须的'
  }
}

const validator = new Validator({});
validator.localize('zh_CN',dict);

自定义规则

Validator.extend('username', {
  getMessage: field => '以字母或者下划线开头，可包含字母数字下划线',
  validate: value => {
    return  /^[a-zA-Z0-9_-]{4,10}$/.test(value)
  }
});
Validator.extend('phonenumber', {
  getMessage: field => field + '必须是11位手机号码',
  validate: value => {
    return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
  }
});
Validator.extend('password', {
  getMessage: field => field + '最少6位，包括至少1字母、特殊字符、数字',
  validate: value => {
    return  /^.*(?=.{6,})(?=.*\d)(?=.*[A-Za-z])(?=.*[!@#$%^&*? ]).*$/.test(value)
  }
});

在模板中使用

 <div class="g-form-line">
             <span class="g-form-label">用户名</span>
             <div class="g-form-input">
                 <input v-validate ="'required|username'" type="text" id="email" name="myUsername">
             </div>
             <span v-show="errors.has('myUsername')" class="help is-danger">{{ errors.first('myUsername')}}</span>
        </div>
           <div class="g-form-line">
             <span class="g-form-label">手机号码</span>
             <div class="g-form-input">
                 <input v-validate ="'required|phonenumber'" type="text" id="phonenumber" name="myPnumber">
             </div>
             <span v-show="errors.has('myPnumber')" class="help is-danger">{{ errors.first('myPnumber')}}</span>
          </div>
      
         <div class="g-form-line">
             <span class="g-form-label">邮箱</span>
             <div class="g-form-input">
                 <input v-validate ="'required|email'" type="text" id="email" name="myEmail" :class="{'input': true, 'is-danger': errors.has('email') }">
             </div>
             <span v-show="errors.has('myEmail')" class="help is-danger">{{ errors.first('myEmail')}}</span>
          </div>
           
        <div class="g-form-line">
          <span class="g-form-label">密码：</span>
          <div class="g-form-input" >
            <input type="password"  v-validate="'required|password|confirmed:pwd_confirm'" id="password" name="myPassWord"  placeholder="请输入密码" >
          </div>
          <span v-show="errors.has('myPassWord')" class="help is-danger">{{ errors.first('myPassWord')}}</span>
        </div>

内置校验规则

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相反
not_in - in相反
numeric - 只允许数字
regex:{pattern} - 值必须符合正则pattern
required - 不解释
size:{kb} - 文件大小不超过
url:{domain?} - (指定域名的)url

作者：乖乖果效36
链接：https://www.jianshu.com/p/bd606e194392

更多详细内置规则可以点击这里