结合vee-validate3做简单表单验证

代码会结合vant+vee-validate来做演示。vee-validate用到的版本是3.2.1。vant是UI框架。

安装

npm install vee-validate --save

新建一个veeValidate.js文件配置vee-validate。官方文档写的还是很详细的，具体的可以去官网查看。

import Vue from 'vue'
import { ValidationObserver, ValidationProvider, extend, localize } from 'vee-validate'
import zh from 'vee-validate/dist/locale/zh_CN.json'
import { required, email, integer, min_value } from 'vee-validate/dist/rules' // 按需引入已有的规则
// 设置语言为中文，默认为英文
localize('zh', zh)
// 注册组件
Vue.component('ValidationObserver', ValidationObserver)
Vue.component('ValidationProvider', ValidationProvider)
// 添加规则
extend('required', {
  ...required,
  message: '{_field_}不可为空'
})
extend('email', email) // 邮箱校验
extend('integer', integer) // 必须为整数值
extend('min_value', min_value) // 必须为数字值，并且不得小于指定的值
// 添加自定义规则
// 手机号校验
extend('phone', {
  validate (value) {
    return (/^1[123456789]\d{9}$/.test(value))
  },
  message: '请输入正确的手机号码'
})

使用

表单比较多推荐全局引用

// main.js
import './utils/veeValidate'

html部分

slim：默认情况下，ValidationProvider和ValidationObserver组件渲染为span标签，设置slim则不会渲染，具体使用参考官方说明。

name：指定要在错误消息中使用的名称。就是用来替代模版里的{_field_}。

rules：应用验证规则，多个规则用“|”符号隔开。

customMessages：自定义错误消息。将覆盖任何默认和已配置的消息。

<ValidationObserver slim ref="form">
  <van-cell-group>
    <ValidationProvider name="手机号" rules="required|phone" v-slot="{ errors }" slim>
      <van-field
        v-model="form.phone"
        label="手机号"
        placeholder="请输入手机号"
        required
        :error-message="errors[0]"
      />
    </ValidationProvider>
    <ValidationProvider name="邮箱" rules="required|email" v-slot="{ errors }" slim>
      <van-field
        v-model="form.email"
        label="邮箱"
        placeholder="请输入邮箱"
        required
        :error-message="errors[0]"
      />
    </ValidationProvider>
    <ValidationProvider name="性别" rules="required" v-slot="{ errors }" slim :customMessages="{'required':'请选择{_field_}'}">
      <van-cell title="性别" required >
        <van-radio-group v-model="form.sex">
            <van-radio :name="0" class="mar-b-15">男</van-radio>
            <van-radio :name="1">女</van-radio>
        </van-radio-group>
        <p class="fc-red text-c">{{errors[0]}}</p>
      </van-cell>
    </ValidationProvider>
    <van-field
      v-model="form.resume"
      label="备注"
      placeholder="请输入备注"
      type="textarea"
      autosize rows="1"
    />
  </van-cell-group>
</ValidationObserver>

<van-button type="info" @click="onSubmit" block round>保存</van-button>

js部分

data () {
    return {
        form: {
            phone: '',
            email: '',
            sex: '',
            resume: ''
        }
    }
}
methods: {
    onSubmit () {
        this.$refs.form.validate().then(success => {
            // success结果返回布尔值
            if (!success) return
            // 处理请求
    
            this.$nextTick(() => {
              // 清除验证状态，需注意值不会清除要自己手动清除
              this.$refs.form.reset()
            })
          })
    }
}

效果图

如果后台要验证手机号的唯一性，验证不通过需要前端显示错误信息，又该如何单独处理呢？ 用setErrors就能解决

代码部分

html部分给手机号输入框加个ref

<ValidationObserver slim ref="form">
  <van-cell-group>
    <ValidationProvider ref="phonefield" name="手机号" rules="required|phone" v-slot="{ errors }" slim>
      <van-field
        v-model="form.phone"
        label="手机号"
        placeholder="请输入手机号"
        required
        :error-message="errors[0]"
      />
    </ValidationProvider>
    <ValidationProvider name="邮箱" rules="required|email" v-slot="{ errors }" slim>
      <van-field
        v-model="form.email"
        label="邮箱"
        placeholder="请输入邮箱"
        required
        :error-message="errors[0]"
      />
    </ValidationProvider>
    <ValidationProvider name="性别" rules="required" v-slot="{ errors }" slim :customMessages="{'required':'请选择{_field_}'}">
      <van-cell title="性别" required >
        <van-radio-group v-model="form.sex">
            <van-radio :name="0" class="mar-b-15">男</van-radio>
            <van-radio :name="1">女</van-radio>
        </van-radio-group>
        <p class="fc-red text-c">{{errors[0]}}</p>
      </van-cell>
    </ValidationProvider>
    <van-field
      v-model="form.resume"
      label="备注"
      placeholder="请输入备注"
      type="textarea"
      autosize rows="1"
    />
  </van-cell-group>
</ValidationObserver>

<van-button type="info" @click="onSubmit" block round>保存</van-button>

js部分

data () {
    return {
        form: {
            phone: '',
            email: '',
            sex: '',
            resume: ''
        }
    }
}
methods: {
    onSubmit () {
        this.$refs.form.validate().then(success => {
            // success结果返回布尔值
            if (!success) return
            // 处理请求
            this.axios.post(api, this.form).then(res => {
                // 如果手机号验证不通过
                if (res.code === -1) {
                   // 需要注意必须是数组
                    this.$refs.phonefield.setErrors(['该手机号已被使用过'])
                }
            })
    
            this.$nextTick(() => {
              // 清除验证状态，需注意值不会清除要自己手动清除
              this.$refs.form.reset()
            })
          })
    }
}