Vue引用vee-validate插件表单验证问题(cdn方式引用)

目录

• 引用vee-validate插件表单验证（cdn方式引入）
• 一、 CDN方式（官网）
• 二、 结合Vue使用
• 三、使用中文错误提示
• 四、HTML代码示例
• 五、自定义验证规则
• 总结

引用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
        )
});

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。