When using Vee-validate to use the Chinese version hint, the vee-validate version needs to be noted
"Vee-validate": "2.0.0-rc.25"
Add the following code to the Main.js
Import veevalidate, {Validator} from ' Vee-validate' vee-validate/dist/locale/zh_cn.js ' Validator.addlocale (CN) vue.use (veevalidate, { ' zh_cn '})
If you want to change the default hints
//To Modify the default error promptConst Dictionary ={zh_cn: {messages: {email: ()= = ' mailbox format is incorrect OH ', Required: (val)={let msg= ' 'Switch(val) { Case' Email ': Msg= ' Mailbox ' Break Case' QQ ': Msg= ' QQ ' Break default:; } msg= msg + ' cannot be empty oh 'returnmsg}} }}validator.updatedictionary (dictionary)
The custom check rules are as follows:
Validator.extend (' QQ ', { messages: { = = ' QQ number entered incorrectly ' }, + = { return /^[1-9][0-9]{4,14}$/. Test (value) }})
The above code is written in JS. The code for form validation within the component is as follows
<template> <div class= "Hello" > <form @submit. prevent= "Validatebeforesubmit" > <div class= "col Umn is-12 "> <label class=" label " for= "Email" >Email</label> <p:class= "{' Control ': true}" > <input v-validate= "' Required|e Mail ' "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 ')}}</sp an> </p> </div> <div class= "column is-12" > <label class= "label" for= "QQ" >qq</label> <p:class= "{' Control ': true}" > <input v-validate= "' Required|qq '": C lass= "{' Input ': true, ' Is-danger ': Errors.has (' QQ ')}" Name= "QQ" type= "text" placeholder= "QQ" > <span v-sh ow= "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& Gt;<script>Exportdefault{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>
Vue2 Mobile uses vee-validate for form validation