使用vee-validate時若要使用中文版本提示時，vee-validate的版本需要注意

"vee-validate": "2.0.0-rc.25"

在main.js里添加如下代碼

import VeeValidate, { Validator } from 'vee-validate' import CN from 'vee-validate/dist/locale/zh_CN.js' Validator.addLocale(CN) Vue.use(VeeValidate, {locale: 'zh_CN' })

若想修改默認的提示

// 修改默認錯誤提示 const dictionary = {zh_CN: {messages: {email: () => '郵箱格式不正確哦',required: (val) => {let msg = ''switch (val) {case 'email':msg = '郵箱'breakcase 'qq':msg = 'qq'breakdefault:;}msg = msg + '不能為空哦'return msg}}} } Validator.updateDictionary(dictionary)

自定義校驗規則如下：

Validator.extend('qq', {messages: {zh_CN: field => 'qq號碼輸入不正確'},validate: value => {return /^[1-9][0-9]{4,14}$/.test(value)} })

以上代碼寫在js里。組件內進行表單驗證的代碼如下

<template><div class="hello"><form @submit.prevent="validateBeforeSubmit"><div class="column is-12"><label class="label" for="email">Email</label><p :class="{ 'control': true }"><input v-validate="'required|email'" v-model="email" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email"><span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span></p></div><div class="column is-12"><label class="label" for="qq">qq</label><p :class="{ 'control': true }"><input v-validate="'required|qq'" :class="{'input': true, 'is-danger': errors.has('qq') }" name="qq" type="text" placeholder="qq"><span v-show="errors.has('qq')" class="help is-danger">{{ errors.first('qq') }}</span></p></div><div class="column is-12"><p class="control"><button class="button is-primary" type="submit">Submit</button></p></div></form></div> </template><script> export default {name: 'HelloWorld',data () {return {email: '',qq: ''}},methods: {validateBeforeSubmit () {this.$validator.validateAll().then((result) => {if (result) {// eslint-disable-next-linealert('Form Submitted!');return}alert('Correct them errors!')})}} } </script>

?

轉載于:https://www.cnblogs.com/nanacln/p/8758711.html

總結

以上是生活随笔為你收集整理的vue2移动端使用vee-validate进行表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。