//为扩展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"); }
输入框验证组件,可自行进行设置验证属性
最新推荐文章于 2024-08-01 14:53:34 发布