vue 中应用 vee-validate 进行表单验证

一、简单介绍： vee-validate 是一个轻量级的vue表单验证插件。

二、使用步骤：

1、安装： 

npm install vee-validate --save-dev

2、main.js

import Vue from 'vue'
import VeeValidate, { Validator } from 'vee-validate'
VeeValidate.Validator.localize('zh_CN');
const config = {
    locale: 'zh_CN'
}
Vue.use(VeeValidate, config)

3、.vue文件

<Col span="7"  offset="1" >
  <span>姓名</span>
  <Input  type="text" v-model="dataForm.xm"  size="small" name="xm" data-vv-as='姓名' v-validate="'required'" @on-blur="this.getxmpinyin"/><br/>
  <span v-if="errors.has('xm')"  style="color:red;">{{ errors.first('xm') }}</span>
</Col>

errors.first('field') -- 获取关于当前field的第一个错误信息
has('field') -- 当前filed是否有错误(true/false)

4、点击“提交”时

this.$validator.validate().then(result => {
  if (!result) {
     this.$message.warning(this.errors.all()[0])
     return false;
  }
}

5、效果

三、自定义规则

在main.js中添加如下代码：

// 自定义validate
const dictionary = {
    zh_CN: {
        messages: {
            required: (field) =>  field + '为必须',
            integer: (field) => field + '必须为整数',
            url: () => '请输入正确格式的服务器地址',
            ip: () => '请输入正确的IP地址'
        },
        attributes: {
            ip: 'IP地址' //自己定义的规则
        }
    }
}
Validator.localize(dictionary);
// 1.IPV4地址
Validator.extend('ipAddr', {
    messages: {
        zh_CN: field => '请输入正确的IPV4地址'
    },
    validate: value => {
        return /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/.test(value)
    }
})

就可实现自定义规则。

或者把有关 表单验证的 相关代码（上述提到的在main.js中写的代码）提出来，放到一个js文件中，然后在main.js中引用，会比较清晰。

完。