Vue引用vee-validate插件表單驗證問題(cdn方式引用)

Posted on by

引用vee-validate插件表單驗證（cdn方式引入）

之前用的是webpack打包工具寫的項目，後來需求改成靜態頁面的方式，所以又要把一些引入方式改過來，這就是前端麻煩的地方。

網上也有很多npm引入方式的，主要是老版本和新版本vee-validate引起的問題（特別是中文錯誤提示的引用問題），我這裡寫一下關於cdn方式引入，中文包配置的問題。

一、 CDN方式（官網）

<!-- 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使用

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

Vue引入這裡就不詳解瞭，不知道的自行百度。

網上有很多配置參數，有需要的可以去查一下，我這裡沒用到就沒寫瞭，網上有些也是花裡胡哨的，沒必要，隻是做個驗證，搞得腦子疼。

不加參數就是這樣：

Vue.use(VeeValidate);

三、使用中文錯誤提示

先下載中文包

https://cdn.bootcss.com/vee-validate/2.2.15/locale/zh_CN.js

沒辦法，暫時沒有找到新版本zh_CN.json的使用方式，cdn引入方式就用這個中文提示包就行瞭，webpack項目的不會存在這個問題。

之後再調用即可：

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}能夠包含字母數字字符、破折號和下劃線`,
            alpha_num: (field) => `${field}隻能包含字母數字字符`,
            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}必須是數字，且能夠保留${decimals === '*' ? '' : decimals}位小數`,
            digits: (field, [length]) => `${field}必須是數字，且精確到${length}位數`,
            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}必須是整數`,
            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}隻能包含數字字符`,
            regex: (field) => `${field}格式無效`,
            required: (field) => `${field}是必須的`,
            size: (field, [size]) => `${field}必須小於${formatFileSize(size)}`,
            url: (field) => `${field}不是一個有效的url`
        }
    }
})

內容是差不多的，用代碼的話更直觀一點。

四、HTML代碼示例

<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>
  • name：必須要添加，不然無法關聯
  • data-vv-as：錯誤提示的中文名稱；例：賬號不能為空，手機號不能為空。
  • v-validate：驗證規則，多個用 ‘|’ 分開。alpha_dash 就是中文規則，能夠包含字母數字字符、破折號和下劃線的意思。

錯誤提示span裡的內容為固定寫法，errors.has有無錯誤顯示，errors.first提示錯誤信息

五、自定義驗證規則

這裡放瞭一些例子提供參考

//手機的驗證。
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: () => `請輸入正確的值，整數或小數，小數後隻能二位`,
    validate: value =>
        /^(-)?\d+(\.\d{1,2})?$/.test(
            value
        )
});

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：