表单验证--插件-1.0.1
1、html代码
<div class="reg"> <form action="" method="post" id="regForm" name="regForm" onsubmit="return false;"> <h1 class="reg-tit">10秒注册账号</h1> <p id="fv_content"></p> <ul class="clearfix"> <li class="fl"> <label class="fl">游戏账号</label> <input type="text" maxlength="16" value="" id="user_name" name="user_name" class="fl inp" autocomplete="off" tabindex="1" datatype="/^[a-z][a-z0-9]{5,15}$/" url="/do/check_default.php" error="6-16位小写字母或数字,首位为字母" /> <div id="user_nameTip" class="onShow"> </div> </li> <li class="fl"> <label class="fl">登录密码</label> <input type="password" value="" maxlength="16" id="user_pwd1" name="user_pwd1" class="fl inp" tabindex="2" datatype="/[a-z0-9]{8,16}/" error="8-16位字母或数字"/> <div id="user_pwd1Tip" class="onShow"> </div> </li> <li class="fl"> <label class="fl">真实姓名</label> <input id="user_realname" class="fl inp" type="text" autocomplete="off" maxlength="4" name="user_realname" tabindex="3" datatype="/^([\u4E00-\u9FA5]+，?)+$/" error="请输入真实姓名"/> <div id="user_realnameTip" class="onShow"> </div> </li> <li class="fl"> <label class="fl">身份证号</label> <input value="" maxlength="18" id="user_idcard" name="user_idcard" class="fl inp" tabindex="4" datatype="idcardVel" error="请输入身份证以保证合法"/> <div id="user_idcardTip" class="onShow"> </div> </li> <li class="fl"> <label class="fl">安全邮箱</label> <input type="text" value="" maxlength="50" id="user_email" name="user_email" class="fl inp" tabindex="5" datatype="emailVel" error="请输入正确邮箱"/> <div id="user_emailTip" class="onShow"> </div> </li> <li class="fl"> <label class="fl">验证码</label> <input type="text" name="user_checkcode" id="user_checkcode" maxlength="4" class="fl inp" tabindex="6"/> <img id="id_randimage" alt="看不清？重新换张！" class="fl" style="display:none;"/> </li> </ul> <p class="reg-agree"><input id="check_agree" type="checkbox" name="check_agree" checked="checked"/> 查看并同意<a href="" target="_blank">《服务协议与隐私声明》</a></p> <input type="submit" name="regsubmit" id="regsubmit" class="block public reg-submit" value="" title="立即注册"/> <input type="hidden" value="ajax" id="submitType" name="submitType" /> <input type="hidden" name="act_id" id="act_id" value="11111111111"/> <button id="xsubmit" value="/do/reg_server_j.php" style="display:none"></button> </form> </div> <div class="reg-ok hide"> <h1 class="reg-tit">注册成功</h1> <div class="public reg-ok-pic"></div> <h2>登录游戏 领取588大礼包</h2> </div>
2、js验证代码
<script src="js/jquery.min.js"></script> <script> var forms = {'id': 'regForm'}; function afterSubmit(result){ var data=eval('('+result+')'); $('#regSubmit').attr('disabled', false); if(data.status == 1){ $('.reg').hide(); $('.reg-ok').show(); }else{ alert(data.msg); $('#user_checkcode').val(''); regFormCon.getNewCode(); return false; } } $(function(){ var regFormCon = { flag:true, checkCode:$('#user_checkcode'), forms:$('#regForm'), submit_btn:$('#regsubmit'), tip:$('#fv_content'), checkImg:$('#id_randimage'), regAgree:$('#check_agree'), xsubmit:$('#xsubmit'), velInput:[], velInFun:[], val_l:[], checkCodebind:function(){ this.checkCode.focus(function(){ if(regFormCon.flag){ regFormCon.checkImg.attr('src','/inc/validatecode.php?rnd=' + Math.random()).show(); regFormCon.flag = false; }else{ return; } }); }, emailVel:function(val){ var pattern = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; if(pattern.test(val)){ return true; } return false; }, getNewCode:function(){ regFormCon.checkImg.attr('src', '/inc/validatecode.php?rnd=' + Math.random()); return false; }, idcardVel:function(b) { if (b.length == 15) { if (this.isValidityBrithBy15IdCard(b)) { if (this.getAgeByIdcard(b)) { alert("您属于未满18周岁的未成年人，无法注册"); return false; } return true; } return false; } else { if (b.length == 18) { var a = b.split(""); if (this.isValidityBrithBy18IdCard(b) && this.isTrueValidateCodeBy18IdCard(a)) { if (this.getAgeByIdcard(b)) { alert("您属于未满18周岁的未成年人，无法注册"); return false; } return true; } return false; } } return false; }, isTrueValidateCodeBy18IdCard: function(b) { var c = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1]; var a = [1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2]; var e = 0; if (b[17].toLowerCase() == "x") { b[17] = 10; } for (var d = 0; d < 17; d++) { e += c[d] * b[d]; } valCodePosition = e % 11; if (b[17] == a[valCodePosition]) { return true; } return false; }, isValidityBrithBy18IdCard: function(b) { var d = b.substring(6, 10); var e = b.substring(10, 12); var a = b.substring(12, 14); var c = new Date(d,parseFloat(e) - 1,parseFloat(a)); if (c.getFullYear() != parseFloat(d) || c.getMonth() != parseFloat(e) - 1 || c.getDate() != parseFloat(a)) { return false; } return true; }, isValidityBrithBy15IdCard: function(d) { var c = d.substring(6, 8); var e = d.substring(8, 10); var a = d.substring(10, 12); var b = new Date(c,parseFloat(e) - 1,parseFloat(a)); if (b.getYear() != parseFloat(c) || b.getMonth() != parseFloat(e) - 1 || b.getDate() != parseFloat(a)) { return false; } return true; }, getAgeByIdcard: function(b) { var f = new Date(); var e = b.length == 18 ? b.slice(6, 10) : 1900 + parseInt(b.slice(6, 8)); e = parseInt(e) + 18; var g = b.length == 18 ? b.slice(10, 12) : b.slice(8, 10); var c = b.length == 18 ? b.slice(12, 14) : b.slice(10, 12); var a = e + "/" + g + "/" + c; if (Date.parse(f) - Date.parse(a) == 0) { return false; } if (Date.parse(f) - Date.parse(a) < 0) { return true; } if (Date.parse(f) - Date.parse(a) > 0) { return false; } return true; }, filterInput:function(){ var fliterIn = this.forms.find('input'); var _l = this.forms.find('input').length; for(var i=0;i<_l;i++){ if(!!fliterIn.eq(i).attr('datatype')){ fliterIn.eq(i).attr('issubmit','0'); this.val_l.push(fliterIn.eq(i)); if(!/\/.+\//.test(fliterIn.eq(i).attr('datatype'))){ this.velInFun.push(fliterIn.eq(i)); continue; } this.velInput.push(fliterIn.eq(i)); } } }, funcVel:function(){ if(this.velInFun){ for(var i = 0; i < this.velInFun.length; i++){ this.velInFun[i].bind('blur',function(){ var _this = $(this); var datatype = _this.attr('datatype').toString(); var value = _this.val(); if(regFormCon[datatype](value)){ _this.attr('issubmit','1'); _this.next().addClass('onCorrect').removeClass('onError'); regFormCon.tip.text(''); }else{ _this.next().addClass('onError').removeClass('onCorrect'); regFormCon.tip.text(_this.attr('error')); } }); this.velInFun[i].bind('focus',function(){ var _this = $(this); var value = _this.val(); regFormCon.tip.text(_this.attr('error')); }); } } }, normalVel:function(){ if(this.velInput){ for(var i = 0; i < this.velInput.length; i++){ this.velInput[i].bind('blur',function(){ var datatype = eval($(this).attr('datatype')); var url = $(this).attr('url'); var value = $(this).val(); var pattern = new RegExp(datatype); var _this = $(this); if(pattern.test(value)){ if(!!url){ $.ajax({ type: "GET", url: url, async:false, data: 'clientid='+_this.attr('id')+'&user_name=' + value +'&_='+ new Date().getTime(), error:function(){ _this.next().addClass('onError').removeClass('onCorrect'); regFormCon.tip.text(_this.attr('error')); return false; }, success: function(msg){ if(msg == 1){ _this.attr('issubmit','1'); _this.next().addClass('onCorrect').removeClass('onError'); regFormCon.tip.text(''); }else{ _this.next().addClass('onError').removeClass('onCorrect'); regFormCon.tip.text(_this.attr('error')); return false; } } }); }else{ _this.next().addClass('onCorrect').removeClass('onError'); regFormCon.tip.text(''); _this.attr('issubmit','1'); } }else{ _this.next().addClass('onError').removeClass('onCorrect'); regFormCon.tip.text(_this.attr('error')); return false; } }); this.velInput[i].bind('focus',function(){ var _this = $(this); var value = _this.val(); regFormCon.tip.text(_this.attr('error')); }); } } }, submit:function(){ var focusF = true; for(var i = 0;i < regFormCon.val_l.length;i++){ if(regFormCon.val_l[i].attr('issubmit') == '1'){ regFormCon.val_l[i].next().addClass('onCorrect').removeClass('onError'); this.tip.text(''); continue; }else{ regFormCon.val_l[i].next().addClass('onError').removeClass('onCorrect'); if(focusF){
this.tip.text(regFormCon.val_l[i].attr('error')); regFormCon.val_l[i].focus(); focusF = false; } if(i == regFormCon.val_l.length-1){ return false; } } } if(this.checkCode.val() == '' || this.checkCode.val().length < 4){ this.tip.text('验证码格式不正确！'); this.checkCode.focus(); this.getNewCode(); return false; } if(!(this.regAgree.attr('checked'))){ alert('您必须同意该协议才能继续注册'); this.getNewCode(); return false; } return true; }, init:function(){ var _this = this; _this.checkCodebind(); _this.filterInput(); _this.funcVel(); _this.normalVel(); regFormCon.checkImg.click(function(){ _this.getNewCode(); }); _this.submit_btn.click(function(){ if(_this.submit()){ _this.xsubmit.get(0).click(); } }); } }; regFormCon.init(); }); </script> <script src="/webtool/webtool.nocache.js"></script>
