Jquery 注册验证

来源：互联网发布：sql server要钱吗编辑：程序博客网时间：2024/05/21 06:13

Jquery + bootstrap 注册验证

效果图

Jquery 里用到的方法

1. Blur(); Focus(); AddClass(); removeClass();

$(pwd).keyup(function(){//验证密码强度的， 用bootstrap 进度条 ， 效果妥妥的var strongRegex = new RegExp("^(?=.{8,20})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");        var mediumRegex = new RegExp("^(?=.{7,20})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");        var enoughRegex = new RegExp("(?=.{6,20}).*", "g");if ($(pwd).val()==null||$(pwd).val()==""||$(pwd).val().length<6) {//$(pwd_info).html("<font color=red size=2><span class='glyphicon glyphicon-minus-sign'></span> 请使用六位及以上密码,密码不能为空</font>");$(".progress-bar-danger").css("width","0%");$(".progress-bar-warning").css("width","0%");$(".progress-bar-success").css("width","0%");}else{if (false == enoughRegex.test($(this).val())) {$(".progress-bar-danger").css("width","0%");$(".progress-bar-warning").css("width","0%");$(".progress-bar-success").css("width","0%");}else if(strongRegex.test($(pwd).val())){ $(pwd_info).html("<font style='color:#ccc'><span class='glyphicon glyphicon-info-sign'></span> 密码安全度（高）</font>");$(".progress-bar-danger").css("width","33%");$(".progress-bar-warning").css("width","34%");$(".progress-bar-success").css("width","33%");}else if(mediumRegex.test($(pwd).val())){$(pwd_info).html("<font style='color:#ccc'><span class='glyphicon glyphicon-info-sign'></span> 密码安全度（中）</font>");$(".progress-bar-danger").css("width","33%");$(".progress-bar-warning").css("width","34%");$(".progress-bar-success").css("width","0%");}else{$(pwd_info).html("<font style='color:#ccc'><span class='glyphicon glyphicon-info-sign'></span> 密码有被盗风险，建议修改密码</font>");$(".progress-bar-danger").css("width","33%");$(".progress-bar-warning").css("width","0%");$(".progress-bar-success").css("width","0%");}}  });

2. 验证信息部分

$(paraInput).focus(function(){$(paraInfo).html("<font style='color:#ccc'><span class='glyphicon glyphicon-info-sign'></span> "+valInfo1+"</font>");});$(paraInput).blur(function(){if($(this).val()==""||$(this).val()==null){$(paraInfo).html("<font style='color:red' size=2><span class='glyphicon glyphicon-minus-sign'></span> "+varInfo3+"</font>");} else if (!myReg.test($(this).val())) {    $(paraInfo).html("<font style='color:red' size=2><span class='glyphicon glyphicon-minus-sign'></span> " + valInfo2 + "</font>");} else {    AjaxVal(paraInput, paraInfo, varinfo4, varinfo5);//Ajax 验证数据}});

0 0