vue之表单验证

main.js import VeeValidate from 'vee-validate' import { Validator } from 'vee-validate' const userNameRegular = /^[A-Za-z0-9]{6,15}$/； Validator.extend('userName', {     // getMessage: (field, [args]) => {     //     console.log(field)     //     console.log(args)     // },     getMessage: (field, [args]) => `由6-15位字母数字组成`,     validate: (value, [args]) =>{                return userNameRegular.test(value)      }   });

Vue.use(VeeValidate);

Login.vue

<template>

 <input v-model="userName" v-validate="{ rules: {  userName: true } }" type="text" name="userName" placeholder="用户名" class="input" >  <p class="notice-p"><span v-show="errors.has('userName')">{{ errors.first('userName') }}</span></p>

/*v-validate中有一个参数required:true  加上的效果，自己试试咯(userName为空会出现自带的错误提示，且不能消除，会影响用户体验)*/

</template>

<script>

export default{

methods:{

goLogin(){

 if(this.userName ==''||this.password ==''){                 Toast(systemConfig.message.errorLogin,'warning');             }             else if(!this.validate()) {                     this.$axios.post(systemConfig.urls.signIn,{                         UserName: this.userName,                         Password: this.password,                                             }).then((resp)=>{                             //do somethhing                         });                 } else {                     Toast(systemConfig.message.errorSubmit,'warning');                 }

},

        validate() {             this.$validator.validateAll();             return this.errors.any()         },

}

}

</script>

v-validate   errors    validate()都是vee-validate暴露出来的  ，使用详情 参见  https://github.com/baianat/vee-validate；