前端：输入密码，并实时进行密码合法性和一致性检验
2019-08-19 本文已影响0人
破碎的時光
简要记录创建用户时对密码的检验
-显示（实时提示密码信息）
<body>
<div class="modal-body password-group">
<label class="col-sm-2 control-label">密码:</label> <input
style="display: inline-block; width: 400px; height: 25px"
type="password" class="form-control" id="psw"
onblur="checkPassword()" placeholder="请输入密码" name="password">
</div>
<font size="2" face="arial" color="grey">
         
<span id="pswErrorMsg">6~32个字符，至少包含大、小写字母、数字和特殊字符中的两种 <br />
         
特殊字符有效范围：.-_:,!@#%&*()
</span>
</font>
<div class="modal-body">
<label class="col-sm-2 control-label">确认密码:</label>
<input
style="display: inline-block; width: 400px; height: 25px"
type="password" class="form-control" id="pswConfirm"
onblur="checkPasswordAgain()" placeholder="请再次输入密码"
name="passwordConfirm">
</div>
<font size="2" face="arial">         
<span id="pswConfirmMsg"></span>
</font>
</body>
-检验第一次输入的密码的合法性
function checkPassword() {
var name = $("#psw").val();
var RegExp1 = /(?!^(\d+|[a-z]+|[A-Z]+|[-_.:,!@#%&*?]+)$)^[\w-.:,!@#%&*?]*/;
var RegExp2 = /[A-Za-z0-9.\-_:,!@#%&*()]*/;
var RegExp3 = /[A-Za-z0-9.\-_:,!@#%&*()]{6,32}/;
if (name == "") {
errmsg("pswErrorMsg","密码不能为空！");
return false;
}
if (RegExp2.exec(name) != name) {
errmsg("pswErrorMsg","仅支持数字、大写字母、小写字母和指定特殊字符！");
return false;
}
if (!RegExp1.test(name)) {
errmsg("pswErrorMsg","数字、大写字母、小写字母和指定特殊字符至少包含2种！");
return false;
}
if (RegExp3.exec(name) != name) {
errmsg("pswErrorMsg","长度应为6~32个字符！");
return false;
}else{
okmsg("pswErrorMsg","密码可用");
return false;
}
$.ajax({
type : "POST",
url : "api/checkPassword",
data : "name=" + name,
success : function(msg) {
if (msg.code == 1) {
$("#pswErrorMsg").removeClass();
$("#pswErrorMsg").addClass("#pswErrorMsg");
$("#pswErrorMsg").html(msg.message);
} else {
$("#pswErrorMsg").removeClass();
$("#pswErrorMsg").addClass("#pswErrorMsg");
$("#pswErrorMsg").html(msg.message);
}
}
});
}
-检验二次输入的一致性
function checkPasswordAgain() {
var name = $("#pswConfirm").val();
var password = $("#psw").val();
if (name != password) {
errmsg("pswConfirmMsg","两次输入密码不一致！");
return false;
}else if(name != ""){
okmsg("pswConfirmMsg","两次输入密码一致");
}
$.ajax({
type : "POST",
url : "api/checkPasswordAgain",
data : "name=" + name,
success : function(msg) {
if (msg.code == 1) {
$("#pswConfirmMsg").removeClass();
$("#pswConfirmMsg").addClass("#pswConfirmMsg");
$("#pswConfirmMsg").html(msg.message);
} else {
$("#pswConfirmMsg").removeClass();
$("#pswConfirmMsg").addClass("#pswConfirmMsg");
$("#pswConfirmMsg").html(msg.message);
}
}
});
}
展示
前端展示.png
显示错误信息.png
密码合法.png
二次检验.png
合法.png
