34.项目 1-博客前端：封装库--注册验证[3]

学习要点：

1.问题所在
2.设置代码

注册验证功能，顾名思义就是验证表单中每个字段的合法性，如果全部合法才可以提交
表单。

一．问题所在

QQ截图20190517093404.png

二．设置代码

界面 HTML

<dd>密 码： <input type="password" name="pass" class="text" />
<span class="info info_pass">
<p>安全级别：<strong class="s s1">■</strong>
<strong class="s s2">■</strong><strong class="s s3">■</strong> <strong
class="s s4" style="font-weight:normal"></strong></p>
<p><strong class="q1" style="font-weight:normal">○</strong> 6-20 个字符</p>
<p><strong class="q2" style="font-weight:normal">○</strong>
只能包含大小写字母、数字和非空格字符</p>
<p><strong class="q3" style="font-weight:normal">○</strong>
大、小写字母、数字、非空字符，2 种以上</p>
</span>
<span class="error error_pass">输入不合法，请重新输入！</span>
<span class="succ succ_pass">可用</span>
</dd>

界面 CSS

#reg dl dd span.info_pass {
width:244px;
height:102px;
padding:4px 0 0 16px;
background:url(images/reg_info3.png) no-repeat;
top:5px;
left:295px;
letter-spacing:0;
}
#reg dl dd span.info_pass p {
height:25px;
line-height:25px;
color:#666;
}
#reg dl dd span.info_pass p strong.s {
color:#ccc;
}
#reg dl dd span.error_pass {
top:43px;
left:295px;
}
#reg dl dd span.succ_pass {
top:52px;
left:295px;
}

JS 代码

$('form').form('pass').bind('focus', function () {
$('#reg .info_pass').css('display', 'block');
$('#reg .error_pass').css('display', 'none');
$('#reg .succ_pass').css('display', 'none');
}).bind('blur', function () {
if (trim($(this).value()) == '') {
$('#reg .info_pass').css('display', 'none');
} else {
if (check_pass(this)) {
$('#reg .info_pass').css('display', 'none');
$('#reg .error_pass').css('display', 'none');
$('#reg .succ_pass').css('display', 'block');
} else {
$('#reg .info_pass').css('display', 'none');
$('#reg .error_pass').css('display', 'block');
$('#reg .succ_pass').css('display', 'none');
}
}
});
//表单验证 -- 密码强度验证
$('form').form('pass').bind('keyup', function () {
check_pass(this)
});
function check_pass(_this) {
var flag = false;
var value = trim($(_this).value());
var value_length = value.length;
var code_length = 0;
if (value_length > 0 && !/\s/.test(value)) {
$('#reg .info_pass .q2').html('●').css('color', 'green');
} else {
$('#reg .info_pass .q2').html('○').css('color', '#666');
}
if (value_length >= 6 && value_length <= 20) {
$('#reg .info_pass .q1').html('●').css('color', 'green');
} else {
$('#reg .info_pass .q1').html('○').css('color', '#666');
}
if (/[0-9]/.test(value)) {
code_length++;
}
if (/[a-z]/.test(value)) {
code_length++;
}
if (/[A-Z]/.test(value)) {
code_length++;
}
if (/[^a-zA-Z0-9]/.test(value)) {
code_length++;
}
if (code_length >= 2) {
$('#reg .info_pass .q3').html('●').css('color', 'green');
} else {
$('#reg .info_pass .q3').html('○').css('color', '#666');
}
if (code_length >= 3 && value_length >= 10) {
$('#reg .info_pass .s1').css('color', 'green');
$('#reg .info_pass .s2').css('color', 'green');
$('#reg .info_pass .s3').css('color', 'green');
$('#reg .info_pass .s4').html('高').css('color', 'green');
} else if (code_length >= 2 && value_length >= 8) {
$('#reg .info_pass .s1').css('color', '#f60');
$('#reg .info_pass .s2').css('color', '#f60');
$('#reg .info_pass .s3').css('color', '#ccc');
$('#reg .info_pass .s4').html('中').css('color', '#f60');
} else if (code_length >= 1) {
$('#reg .info_pass .s1').css('color', 'maroon');
$('#reg .info_pass .s2').css('color', '#ccc');
$('#reg .info_pass .s3').css('color', '#ccc');
$('#reg .info_pass .s4').html('低').css('color', 'maroon');
} else {
$('#reg .info_pass .s1').css('color', '#ccc');
$('#reg .info_pass .s2').css('color', '#ccc');
$('#reg .info_pass .s3').css('color', '#ccc');
$('#reg .info_pass .s4').html(' ').css('color', '#ccc');
}
if (value_length >= 6 && value_length <= 20 && code_length >= 2) flag = true;
return flag;
}

感谢收看本次教程！