<!-- jsdelivr cdn -->
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>

<!-- unpkg -->
<script src="https://unpkg.com/vee-validate@latest"></script>

Vue.use(VeeValidate, {
    events: 'change'     //這里的events是觸發(fā)事件，例如失去焦點驗證，我這里用的是輸入改變校驗
});

Vue.use(VeeValidate);

VeeValidate.Validator.localize('zh_CN');

VeeValidate.Validator.localize({
    zh_CN: {
        messages: {
            _default: (field) => `${field}的值無效`,
            after: (field, [target, inclusion]) => `${field}必須在${target}之后${inclusion ? '或等于' + target : ''}`,
            alpha: (field) => `${field}只能包含字母字符`,
            alpha_dash: (field) => `${field}能夠包含字母數(shù)字字符、破折號和下劃線`,
            alpha_num: (field) => `${field}只能包含字母數(shù)字字符`,
            alpha_spaces: (field) => `${field}只能包含字母字符和空格`,
            before: (field, [target, inclusion]) => `${field}必須在${target}之前${inclusion ? '或等于' + target : ''}`,
            between: (field, [min, max]) => `${field}必須在${min}與${max}之間`,
            confirmed: (field, [confirmedField]) => `${field}不能和上面${confirmedField}匹配`,
            credit_card: (field) => `${field}的格式錯誤`,
            date_between: (field, [min, max]) => `${field}必須在${min}和${max}之間`,
            date_format: (field, [format]) => `${field}必須符合${format}格式`,
            decimal: (field, [decimals = '*'] = []) => `${field}必須是數(shù)字，且能夠保留${decimals === '*' ? '' : decimals}位小數(shù)`,
            digits: (field, [length]) => `${field}必須是數(shù)字，且精確到${length}位數(shù)`,
            dimensions: (field, [width, height]) => `${field}必須在${width}像素與${height}像素之間`,
            email: (field) => `${field}不是一個有效的郵箱`,
            excluded: (field) => `${field}不是一個有效值`,
            ext: (field) => `${field}不是一個有效的文件`,
            image: (field) => `${field}不是一張有效的圖片`,
            included: (field) => `${field}不是一個有效值`,
            integer: (field) => `${field}必須是整數(shù)`,
            ip: (field) => `${field}不是一個有效的地址`,
            length: (field, [length, max]) => {
                if (max) {
                    return `${field}長度必須在${length}到${max}之間`
                }

                return `${field}長度必須為${length}`
            },
            max: (field, [length]) => `${field}不能超過${length}個字符`,
            max_value: (field, [max]) => `${field}必須小于或等于${max}`,
            mimes: (field) => `${field}不是一個有效的文件類型`,
            min: (field, [length]) => `${field}必須至少有${length}個字符`,
            min_value: (field, [min]) => `${field}必須大于或等于${min}`,
            numeric: (field) => `${field}只能包含數(shù)字字符`,
            regex: (field) => `${field}格式無效`,
            required: (field) => `${field}是必須的`,
            size: (field, [size]) => `${field}必須小于${formatFileSize(size)}`,
            url: (field) => `${field}不是一個有效的url`
        }
    }
})

<div class="item-ipt" >
     <label>賬號</label>
     <input class="ipt" name="name" data-vv-as="賬號" v-validate="'required|alpha_dash'" v-model="username" placeholder="請輸入用戶名" :disabled="nameable"/>
     <span v-show="errors.has('name')" class="ipt-err">{{ errors.first('name') }}</span>
</div>
<div class="item-ipt" >
     <label>手機號</label>
     <input class="ipt" name="mobile" data-vv-as="手機號" v-validate="'required|mobile'" v-model="mobile" placeholder="請輸入驗證碼" />
     <span v-show="errors.has('mobile')" class="ipt-err">{{ errors.first('mobile') }}</span>
</div>

//手機的驗證。
VeeValidate.Validator.extend("mobile", {
    getMessage: () => `請輸入正確的手機號碼`,
    validate: value =>
        value.length === 11 &&
        /^(((13[0-9]{1})|(14[57]{1})|(15[012356789]{1})|(17[03678]{1})|(18[0-9]{1})|(19[89]{1})|(16[6]{1}))+\d{8})$/.test(
            value
        )
});
//身份證的驗證。
VeeValidate.Validator.extend("idCard", {
    getMessage: () => `請輸入正確的身份證號碼`,
    validate: value =>
        /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/.test(
            value
        )
});
//郵箱的驗證。
VeeValidate.Validator.extend("Email", {
    getMessage: () => `請輸入正確的郵箱地址`,
    validate: value =>
        /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(
            value
        )
});
//郵箱的驗證。
VeeValidate.Validator.extend("fax", {
    getMessage: () => `請輸入正確的辦公電話`,
    validate: value =>
        /^((0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/.test(
            value
        )
});
VeeValidate.Validator.extend("intOrDe", {
    getMessage: () => `請輸入正確的值，整數(shù)或小數(shù)，小數(shù)后只能二位`,
    validate: value =>
        /^(-)?\d+(\.\d{1,2})?$/.test(
            value
        )
});