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；