在所有web项目中表单都是一个很常用的东西，在提交表单时可能需要验证表单的正确性，如果不正确则拒绝提交。这篇文章就主要介绍vue中应该如果做表单验证。

表单验证

网上能找到很多vue表单验证的插件，Elemen也自带有表单验证功能，所以在项目中看各位更习惯用哪种吧。我平时用的较多的是VeeValidate

安装插件

命令：npm install vee-validate --save

用法

1.在main.js文件中引入插件及对应的语言包

import Vue from 'vue'
import zh from 'vee-validate/dist/locale/zh_CN'
import VeeValidate, {Validator} from 'vee-validate'
 
Validator.localize('zh_CN', zh)
Vue.use(VeeValidate)
PS：注意高亮部分，该字符串随用户自定义，表示引入了一个语言包并对该语言环境定义一个名称。(如果要修改默认错误提示信息等需要指明语言环境，就需要用到该名称)

2.验证

PS：如果要验证某个输入框的值，那么这个输入框必须要有name属性

html结构：
v-validate 验证规则。 errors.has('field') 检查是否存在与该字段相关的任何错误。 errors.first('field') 获取与该字段关联的第一条错误消息。　---field为元素name属性的值

<input name="userEmail" v-model="val" v-validate="'required|email'" :class="{'is-danger': errors.has('userEmail')}" type="text" placeholder="请输入电子邮箱">
<span v-show="errors.has('userEmail')" class="error">{{ errors.first('userEmail') }}</span>

JS部分：

有时候，在同一个组件中可能会有多个表单。你在对数据进行操作时可能只希望验证某个表单中的所有字段。这时您可以通过添加一个data-vv-scope属性告诉验证器来确定验证范围。代码如下(注意高亮部分)：

<form data-vv-scope="form-1">
  <p>
    <input name="userEmail" v-model="emailVal" v-validate="'required|email'" :class="{'is-danger': errors.has('form-1.userEmail')}" type="text">
    <span v-show="errors.has('form-1.userEmail')" class="error">{{ errors.first('form-1.userEmail') }}</span>
 </p>
  <p>
    <input name="userName" v-model="nameVal" v-validate="'required|alpha'" :class="{'is-danger': errors.has('form-1.userName')}" type="text">
    <span v-show="errors.has('form-1.userName')" class="error">{{ errors.first('form-1.userName') }}</span>
 </p>
  <p>
    <button class="button" type="button" @click="submit('form-1')">提交<button>
 </p>
</form>

自定义错误信息

1.修改某个规则默认的错误提示信息(在main.js文件中统一修改)

const dictionary = {
  messages: {
    required: (field) => field + '不能为空'
  }
}
Validator.localize('zh_CN', dictionary)
PS：这段代码应该放在语言设置之后。

2.修改特定字段某个规则的错误提示信息。(您可能需要为某个字段的某个规则提供不同的错误提示。要做到这一点，你需要用到custom)

const dictionary = {
  custom: {
    userEmail: {
      required: () => '用户邮箱不能为空'
    }
  }
}
this.$validator.localize('zh_CN', dictionary)
PS：第一个高亮为字段名，第二个高亮为规则名。此代码应该放在组件的mounted生命周期中

自定义验证规则

新建一个规则必须包含getMessage和validate两个方法，getMessage设置错误提示消息，validate设置验证表达式。然后使用使用extend添加到规则列表中。代码如下：

main.js中添加规则：

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

组件中使用：

<input name="userMobile" v-model="val" v-validate="'required|mobile'" :class="{'is-danger': errors.has('userMobile')}" type="text" placeholder="请输入手机号">
<span v-show="errors.has('userMobile')" class="error">{{ errors.first('userMobile') }}</span>

扩展部分(把表单验证的代码抽离出来单独写一个validate.js文件)

main.js中的代码：

import './assets/js/validate.js'

validate.js中的代码：

import Vue from 'vue'
import zh from 'vee-validate/dist/locale/zh_CN'
import VeeValidate, {Validator} from 'vee-validate'
 
Validator.localize('zh_CN', zh)
Vue.use(VeeValidate)
 
// 修改默认提示语
const dictionary = {
  messages: {
    required: (field) => field + '不能为空'
  }
}
Validator.localize('zh_CN', dictionary)
 
// 添加自定义规则
Validator.extend('mobile', {
  getMessage: (field, args) => field + '必须是11位手机号码',
  validate: (value, args) => value.length === 11 && /^((13|14|15|17|18)[0-9]{1}d{8})$/.test(value)
})
上一篇 下一篇