SoFunction
Updated on 2025-03-09

Vue reference vee-validate plug-in form verification problem (cdn method reference)

Reference vee-validate plug-in form verification (introduced by cdn method)

I used the project written by webpack packaging tool before, but later I needed to change it to a static page method, so I had to change some introduction methods, which is the troublesome part of the front-end.

There are also many ways to introduce npm on the Internet, mainly problems caused by old and new versions of vee-validate (especially the citation issues of Chinese error prompts). I will write about the introduction of cdn method and the configuration of Chinese packages here.

1. CDN method (official website)

<!-- jsdelivr cdn -->
<script src="/npm/vee-validate@latest/dist/"></script>

<!-- unpkg -->
<script src="/vee-validate@latest"></script>

2. Use in combination with Vue

(VeeValidate, {
    events: 'change'     //The events here are triggering events, such as losing focus verification, I use input change verification here});

I won’t explain it in detail when Vue is introduced here, I don’t know what I want to do on Baidu.

There are many configuration parameters on the Internet. If you need it, you can check it. I didn’t write it if I didn’t use it here. Some of them are also fancy and whistle on the Internet. There is no need to do it. Just do a verification, which makes my brain hurt.

Without adding parameters, it is like this:

(VeeValidate);

3. Error prompts in Chinese

Download the Chinese package first

/vee-validate/2.2.15/locale/zh_CN.js

There is no way, the new version of zh_CN.json has not been found yet. Just use this Chinese prompt package to introduce cdn. The webpack project will not have this problem.

Then call it again:

('zh_CN');

If you do not use this package, you can refer to the following code:

({
    zh_CN: {
        messages: {
            _default: (field) =&gt; `${field}The value of the`,
            after: (field, [target, inclusion]) =&gt; `${field}Must be in${target}after${inclusion ? 'or equal to' + target : ''}`,
            alpha: (field) =&gt; `${field}Only alphabetical characters are included`,
            alpha_dash: (field) =&gt; `${field}Can contain alphanumeric characters、Dash and underscore`,
            alpha_num: (field) =&gt; `${field}Only alphanumeric characters are included`,
            alpha_spaces: (field) =&gt; `${field}Only alphabetical characters are includedand空格`,
            before: (field, [target, inclusion]) =&gt; `${field}Must be in${target}Before${inclusion ? 'or equal to' + target : ''}`,
            between: (field, [min, max]) =&gt; `${field}Must be in${min}and${max}between`,
            confirmed: (field, [confirmedField]) =&gt; `${field}Can't be with the above${confirmedField}match`,
            credit_card: (field) =&gt; `${field}Error in format`,
            date_between: (field, [min, max]) =&gt; `${field}Must be in${min}and${max}between`,
            date_format: (field, [format]) =&gt; `${field}Must be in compliance${format}Format`,
            decimal: (field, [decimals = '*'] = []) =&gt; `${field}Must be a number，And can be retained${decimals === '*' ? '' : decimals}Decimal places`,
            digits: (field, [length]) =&gt; `${field}Must be a number，And precise${length}Number of digits`,
            dimensions: (field, [width, height]) =&gt; `${field}Must be in${width}像素and${height}像素between`,
            email: (field) =&gt; `${field}Not a valid email`,
            excluded: (field) =&gt; `${field}Not a valid value`,
            ext: (field) =&gt; `${field}Not a valid file`,
            image: (field) =&gt; `${field}Not a valid picture`,
            included: (field) =&gt; `${field}Not a valid value`,
            integer: (field) =&gt; `${field}Must be an integer`,
            ip: (field) =&gt; `${field}Not a valid address`,
            length: (field, [length, max]) =&gt; {
                if (max) {
                    return `${field}长度Must be in${length}arrive${max}between`
                }

                return `${field}The length must be${length}`
            },
            max: (field, [length]) =&gt; `${field}Can't exceed${length}Characters`,
            max_value: (field, [max]) =&gt; `${field}Must be less than or equal to${max}`,
            mimes: (field) =&gt; `${field}Not a valid file类型`,
            min: (field, [length]) =&gt; `${field}Must have at least${length}Characters`,
            min_value: (field, [min]) =&gt; `${field}Must be greater than or equal to${min}`,
            numeric: (field) =&gt; `${field}Only numeric characters are included`,
            regex: (field) =&gt; `${field}Format无效`,
            required: (field) =&gt; `${field}is required`,
            size: (field, [size]) =&gt; `${field}Must be less than${formatFileSize(size)}`,
            url: (field) =&gt; `${field}Not a validurl`
        }
    }
})

The content is similar, and it is more intuitive to use code.

4. HTML code examples

&lt;div class="item-ipt" &gt;
     &lt;label&gt;account&lt;/label&gt;
     &lt;input class="ipt" name="name" data-vv-as="account" v-validate="'required|alpha_dash'" v-model="username" placeholder="Please enter a username" :disabled="nameable"/&gt;
     &lt;span v-show="('name')" class="ipt-err"&gt;{{ ('name') }}&lt;/span&gt;
&lt;/div&gt;
&lt;div class="item-ipt" &gt;
     &lt;label&gt;Phone number&lt;/label&gt;
     &lt;input class="ipt" name="mobile" data-vv-as="Phone number" v-validate="'required|mobile'" v-model="mobile" placeholder="Please enter verification code" /&gt;
     &lt;span v-show="('mobile')" class="ipt-err"&gt;{{ ('mobile') }}&lt;/span&gt;
&lt;/div&gt;
  • name: Must be added, otherwise it cannot be associated
  • data-vv-as: The Chinese name of the error prompt; Example: The account cannot be empty, and the mobile phone number cannot be empty.
  • v-validate: Verification rules, multiple use ‘|’ to separate them. alpha_dash is a Chinese rule, which can contain alphanumeric characters, dashes and underscores.

The error message indicates that the content in the span is written in a fixed way. Whether there is any error display, prompts the error message

5. Custom verification rules

Here are some examples for reference

//Mobile phone verification.("mobile", {
    getMessage: () =&gt; `Please enter the correct mobile phone number`,
    validate: value =&gt;
         === 11 &amp;&amp;
        /^(((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
        )
});
//Verification of ID card.("idCard", {
    getMessage: () =&gt; `Please enter the correct ID number`,
    validate: value =&gt;
        /^\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
        )
});
//Email verification.("Email", {
    getMessage: () =&gt; `Please enter the correct email address`,
    validate: value =&gt;
        /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(
            value
        )
});
//Email verification.("fax", {
    getMessage: () =&gt; `Please enter the correct office phone number`,
    validate: value =&gt;
        /^((0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/.test(
            value
        )
});
("intOrDe", {
    getMessage: () =&gt; `Please enter the correct value，Integer or decimal，Only two digits after the decimal`,
    validate: value =&gt;
        /^(-)?\d+(\.\d{1,2})?$/.test(
            value
        )
});

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.