vue自定义轻量级form表单校验

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

遇到了form表单" title="form表单">form表单提交的需求，找了vue的组件觉得不够灵活，有时间自己写了一个。

调用方法 全局引入注册：

import va from 'global/js/va'

va.install(Vue);

// 注册一个全局自定义指令 

Vue.directive('va', {})

在每个需要校验的input加上 例如：

<div>
                <label>库存:</label>
                <input v-va:stock="[{'NonEmpty':'Money'}]" placeholder="请输入库存(份)" v-model="data.stock" tag="库存"
                       type="number"/>
                <p class="red">{{va.stock.message}}</p>
 </div>

校验类型:v-va:describe="[{'NonEmpty':''}]" 具体错误类型请看下文

tag:错误提示信息描述

p:展示错误信息

data绑定:

va : { stock : {} },

//sub提交时所用到

msg : { describe : '描述' },

data:{ describe:'' }

当点击but提交form是 触发不能为空校验

                var self = this;
                var va = self.va;
                for (var i in va) {
                    if (!va[i].isPass) {
                        Vue.set(self.va[i], 'message', self.msg[i] + '不能为空')
                    }
                }

组件里有一些常用正则：

//常用正则表
var regList = {
    tel     : /^1[34578]\d{9}$/,
    idCard  : /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/,
    ImgCode : /^[0-9a-zA-Z]{4}$/,
    SmsCode : /^\d{4}$/,
    MailCode: /^\d{4}$/,
    UserName: /^[\w|\d]{4,16}$/,
    Password: /^[\[email protected]#$%^&*.]{6,16}$/,
    Mobile  : /^1[3|4|5|7|8]\d{9}$/,
    RealName: /^[\u4e00-\u9fa5|·]{2,16}$|^[a-zA-Z|\s]{2,20}$/,
    BankNum : /^\d{10,19}$/,
    Money   : /^([1-9]\d*|[0-9]\d*\.\d{1,2}|0)$/,
    Answer  : /^\S+$/,
    Mail    : /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
}

以及提示字段：

// 获得不同的报错信息
function getErrMsg(vaForm, ruleType, ruleValue) {
    var tag     = vaForm.tag
    var errMsgs = {
        NonEmpty: `${tag}不能为空`,
        reg     : `${tag}格式错误`,
        limit   : `${tag}必须在${ruleValue[0]}与${ruleValue[1]}之间`,
        equal   : `两次${tag}不相同`,
        length  : `${tag}长度必须在${ruleValue[0]}与${ruleValue[1]}之间`,
        unique  : `${tag}不能相同`
    }
    return errMsgs[ruleType]
}

都可以自定义添加

具体调用校验方法 例如：v-va:stock="[{'NonEmpty':'Money'}]" stock 在data中va对象校验字段 数组中是在va.js中的校验方法子段，可重复。优先级左到右。

js下载地址：https://github.com/Runtheantland/vue-form

以上是 vue自定义轻量级form表单校验 的全部内容， 来源链接： utcz.com/z/377777.html

回到顶部