Vue引用vee-validate插件表单验证问题(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.use(VeeValidate, {
    events: 'change'     //这里的events是触发事件，例如失去焦点验证，我这里用的是输入改变校验
});

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}能够包含字母数字字符、破折号和下划线`,
            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`
        }
    }
})

<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
        )
});
//SFZ的验证。
VeeValidate.Validator.extend("idCard", {
    getMessage: () => `请输入正确的SFZ号码`,
    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
        )
});