输入框验证组件,可自行进行设置验证属性

//为扩展jQuery类本身.为类添加新的方法。
//验证方法
//输入框事例:<input type="password" id="comPwd" class="form-control" name="pwd" data-tip="确认密码" required="required" data-options="required:required,equal:newPwd">
//data-tip:当前输入框的名称,起到弹出层提示具体某个字段用途
//required="required":需要验证的标识符,起到检索的用途
//data-options:包含了所有需要验证的属性

//data-options——required:required:验证是否为空
//data-options——equal:newPwd:验证是否一致,事例newPwd为某个输入框的属性id,通过此id可进行2个输入框的一致验证
//参数e:所选验证区域父元素的标识
$.extend({
    formVerify:function(e){
        var input = $(e).find(".form-control[required='required']");//获取所有需要验证的输入框
        for (var i = 0; i < input.length; i++) {//循环所有需要验证的输入框
            //获取当前验证框的验证属性对象
            //属性事例:["required:required","equal:newPwd"]
            for (var k = 0 ; k < input[i].attributes.length; k++) {
                switch (input[i].attributes[k].name) {
                    case "dataoptions":
                        var option = input[i].attributes[k].value.split(",")//切割data-options的验证属性
                        break;
                    case "datatip":
                        var tip = input[i].attributes[k].nodeValue;//当前验证框的焦点名称,弹出层提示需用到,例如:账户名,密码
                        break;
                    case "id":
                        var node = input[i].attributes[k].nodeValue;//当前验证框的属性id,通过id来将弹出层定位在当前验证框后面
                        break;
                }
            }
            //var option = input[i].attributes[1].value.split(",")
            for (var j = 0; j < option.length; j++) {
                //var tip = input[i].attributes[3].nodeValue;//当前验证框的焦点名称,弹出层提示需用到,例如:账户名,密码
                //var node = input[i].attributes[7].nodeValue;//当前验证框的属性id,通过id来将弹出层定位在当前验证框后面
                var val = input[i].value;//当前验证框的值
                //获取验证框属性,通过:切割,获取第一位参数,即实现的验证方法
                //required:验证是否为空
                //type:验证某个类型,mobile,email,PositiveNum
                //equal:验证是否和某个字段参数相同
                switch (option[j].split(":")[0]) {
                    case "required":
                        if (val == "") {
                            layer.tips(tip + '不能为空!', '#' + node);
                            return false;
                        }
                        break;
                    case "type":
                        var tpNode = option[j].split(":")[1];//获取需要验证的类型
                        if (tpNode == "mobile") {
                            if (!isMobile(val)) {//调用验证手机号码方法,如果不符合,!isMobile(val)为true,进入验证提示
                                layer.tips('手机号码不合法!', '#' + node);
                                return false;
                            }
                        }
                        break;
                    case "equal":
                        var eqNode = option[j].split(":")[1];//获取需要验证是否一致的输入框的属性id
                        if (val != document.getElementById(eqNode).value) {//$("#"+eqNode).val().trim():jquery写法,获取验证一致的输入框的值
                            layer.tips(tip + '不相同!', '#' + node);
                            return false;
                        }
                        break;
                }
            }
        }
        return true;
    }
})
//调用方法
//需要引用layer.js弹出层组件
function getReason(){
    $.formVerify("#collectStep1");
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值