匹配8-16位，至少有一个大写字母或小写字母，至少有一个数字，至少有一个特殊字符包括-`=\[\];',.~!@#$%^&*()_+|{}:"?，不过要注意不同语言的转义字符问题。
方式一和方式二实现如下所示：
<!DOCTYPE html>
<html>
<head>
<title>前端JS正则校验密码</title>
<style type="text/css">
*{
margin: 0;padding: 0}
</style>
</head>
<body>
<script type="text/javascript">
/**
* 匹配8-16位，至少有一个大写字母或小写字母，至少有一个数字，至少有一个特殊字符包括-`=\[\];',.~!@#$%^&*()_+|{}:"?
*
* ^是正则表达式匹配字符串开始位置。
* $是正则表达式匹配字符串结束位置。
* ()是为了提取匹配的字符串，表达式中有几个()就有几个相应的匹配字符串。
* []是定义匹配的字符范围，匹配的字符在[]中。
* {}一般用来表示匹配的长度，比如\s{3} 表示匹配三个空格，\s{1,3}表示匹配一到三个空格。
*/
var arrayList = new ArrayList();
arrayList.add("123");
arrayList.add("aaa");
arrayList.add("AAA");
arrayList.add("123a");
arrayList.add("123A");
arrayList.add("123789aOa");
arrayList.add("123789AoA");
arrayList.add("123789A $");
arrayList.add("123789a $");
arrayList.add("123Ao A$");
arrayList.add("123aO a$");
arrayList.add("123789A$");
arrayList.add("123789a$");
arrayList.add("123AoA$-");
arrayList.add("123aOa$-");
arrayList.add("123AoA()$");
arrayList.add("1234567a");
arrayList.add("aaabbb&&&");
arrayList.add("aaabbb&&&1");
arrayList.add("123761123&&&");
arrayList.add(" ");
arrayList.add(" 7613&&&");
arrayList.add(" 7613aa&&&");
arrayList.add(" 7613AA&&&");
arrayList.add(" 7613Ss&&&");
for (var i = arrayList.size() - 1; i >= 0; i--) {
// console.log(arrayList.get(i));
checkAction1(arrayList.get(i));
checkAction2(arrayList.get(i));
console.log("\n");
}
/**
* 前端正则检验密码 - 必须满足5种情况才ture
* 规则拆分写
*/
function checkAction1(password){
var upperCaseOrlowerCase = /[a-zA-Z]/;// 判断是否有大写或小写
var number = /[0-9]/;// 判断是否有数字
var specificSymbol = /[-`=\[\];',.~!@#$%^&*()_+|{}:"?]/;// 判断是否有特殊符号，注意在C#页面中需要两个@@才转义成一个
var length=/^.{8,16}$/;// 判断是否长度为8-16位
var space=/^\S+$/;// 判断必须非空格
var test = upperCaseOrlowerCase.test(password) && specificSymbol.test(password) && number.test(password) && length.test(password) && space.test(password);
console.log(test+" ----checkAction1---- "+password);// 输出正则匹配结果
}
/**
* 前端正则检验密码
* 规则合并写
*/
function checkAction2(password){
// (?![0-9A-Za-z]+$)意思是不能是纯大写字母的密码，也不能是纯小写字母的密码，也不能是纯数字的密码，也不能是由大写字母和小写字母和数字组合的密码。
// (?![-`=\[\];',.~!@#$%^&*()_+|{
}:"?]+$)意思是不能是指定的纯特殊字符的密码。
// (?![0-9-`=\[\];',.~!@#$%^&*()_+|{}:"?]+$)意思是不能是由指定的纯特殊字符和数字组合的密码。
// (?![A-Za-z-`=\[\];',.~!@#$%^&*()_+|{}:"?]+$)意思是不能是由指定的纯特殊字符和大写字母和小写字母组合的密码。
// [0-9a-zA-Z-`=\[\];',.~!@#$%^&*()_+|{}:"?]意思是定义字符范围，注意此不包括\s空格字符。
// {8,16}意思是定义密码匹配的长度。
var regex = /^(?![0-9A-Za-z]+$)(?![-`=\[\];',.~!@#$%^&*()_+|{}:"?]+$)(?![0-9-`=\[\];',.~!@#$%^&*()_+|{}:"?]+$)(?![A-Za-z-`=\[\];',.~!@#$%^&*()_+|{}:"?]+$)[0-9a-zA-Z-`=\[\];',.~!@#$%^&*()_+|{}:"?]{8,16}$/;
var test = regex.test(password);
console.log(test+" ----checkAction2---- "+password);//输出正则匹配结果
}
/**
* JS实现ArrayList
*/
function ArrayList(){
this.arr=[],
this.size=function(){
return this.arr.length;
},
this.add=function(){
if(arguments.length==1){
this.arr.push(arguments[0]);
}else if(arguments.length>=2){
var deleteItem=this.arr[arguments[0]];
this.arr.splice(arguments[0],1,arguments[1],deleteItem)
}
return this;
},
this.get=function(index){
return this.arr[index];
},
this.removeIndex=function(index){
this.arr.splice(index,1);
},
this.removeObj=function(obj){
this.removeIndex(this.indexOf(obj));
},
this.indexOf=function(obj){
for(var i=0;i<this.arr.length;i++){
if (this.arr[i]===obj) {
return i;
};
}
return -1;
},
this.isEmpty=function(){
return this.arr.length==0;
},
this.clear=function(){
this.arr=[];
},
this.contains=function(obj){
return this.indexOf(obj)!=-1;
}
};
</script>
</body>
</html>
方式一和方式二实现效果：
index.html:66 false ----checkAction1---- 7613Ss&&&
index.html:83 false ----checkAction2---- 7613Ss&&&
index.html:66 false ----checkAction1---- 7613AA&&&
index.html:83 false ----checkAction2---- 7613AA&&&
index.html:66 false ----checkAction1---- 7613aa&&&
index.html:83 false ----checkAction2---- 7613aa&&&
index.html:66 false ----checkAction1---- 7613&&&
index.html:83 false ----checkAction2---- 7613&&&
index.html:66 false ----checkAction1----
index.html:83 false ----checkAction2----
index.html:66 false ----checkAction1---- 123761123&&&
index.html:83 false ----checkAction2---- 123761123&&&
index.html:66 true ----checkAction1---- aaabbb&&&1
index.html:83 true ----checkAction2---- aaabbb&&&1
index.html:66 false ----checkAction1---- aaabbb&&&
index.html:83 false ----checkAction2---- aaabbb&&&
index.html:66 false ----checkAction1---- 1234567a
index.html:83 false ----checkAction2---- 1234567a
index.html:66 true ----checkAction1---- 123AoA()$
index.html:83 true ----checkAction2---- 123AoA()$
index.html:66 true ----checkAction1---- 123aOa$-
index.html:83 true ----checkAction2---- 123aOa$-
index.html:66 true ----checkAction1---- 123AoA$-
index.html:83 true ----checkAction2---- 123AoA$-
index.html:66 true ----checkAction1---- 123789a$
index.html:83 true ----checkAction2---- 123789a$
index.html:66 true ----checkAction1---- 123789A$
index.html:83 true ----checkAction2---- 123789A$
index.html:66 false ----checkAction1---- 123aO a$
index.html:83 false ----checkAction2---- 123aO a$
index.html:66 false ----checkAction1---- 123Ao A$
index.html:83 false ----checkAction2---- 123Ao A$
index.html:66 false ----checkAction1---- 123789a $
index.html:83 false ----checkAction2---- 123789a $
index.html:66 false ----checkAction1---- 123789A $
index.html:83 false ----checkAction2---- 123789A $
index.html:66 false ----checkAction1---- 123789AoA
index.html:83 false ----checkAction2---- 123789AoA
index.html:66 false ----checkAction1---- 123789aOa
index.html:83 false ----checkAction2---- 123789aOa
index.html:66 false ----checkAction1---- 123A
index.html:83 false ----checkAction2---- 123A
index.html:66 false ----checkAction1---- 123a
index.html:83 false ----checkAction2---- 123a
index.html:66 false ----checkAction1---- AAA
index.html:83 false ----checkAction2---- AAA
index.html:66 false ----checkAction1---- aaa
index.html:83 false ----checkAction2---- aaa
index.html:66 false ----checkAction1---- 123
index.html:83 false ----checkAction2---- 123
方式三实现如下所示：
<!DOCTYPE html>
<html>
<head>
<title>前端JS正则校验密码</title>
<meta charset="utf-8">
<script type="text/javascript" src="./jquery-1.10.2.js"></script>
<style type="text/css">.ok{
color:lightgreen;}.no{
color:red;}.tip p {
color: #0c79ba;}</style>
</head>
<body>
<div class="tip">
<div>
<p><b>登录密码需满足如下要求：</b><p />
<p>需要包含小写字母a...z或者大写字母A...Z <span class="upperCaseOrlowerCase" /></p>
<p>需要包含数字0...9 <span class="number" /></p>
<p>需要包含至少一位如下特殊字符-`=[];',.~!@#$%^&*()_+|{}:"? <span class="specificSymbol" /></p>
<p>密码长度需要在8-16位之间 <span class="length" /></p>
<p>两次设置的登录密码保持一致 <span class="confirmPassword" /></p>
</div>
</div>
<div class="form">
<p>
<input placeholder="旧密码不能为空！" id="OldPassword" name="OldPassword" type="password" />
</p>
<p>
<input placeholder="新密码不能为空！" id="Password" name="Password" type="password" />
</p>
<p>
<input placeholder="确认密码不能为空！" id="ConfirmPassword" name="ConfirmPassword" type="password" />
</p>
<p>
<input type="button" value="确定" onclick="ChangePassword()" />
</p>
</div>
<script type="text/javascript">
function keyUp(e) {
// var currKey=0,e=e||event;
// currKey=e.keyCode||e.which||e.charCode;
// var keyName = String.fromCharCode(currKey);
// console.log("按键码: " + currKey + " 字符: " + keyName);
var input = $("#Password").val();
var eq = $("#ConfirmPassword").val() == input;
if (/^.*[A-Za-z]{1,}.*$/.test(input)) {
$(".upperCaseOrlowerCase").html("<span class='ok'>OK</span>");
} else {
$(".upperCaseOrlowerCase").html("<span class='no'>NO</span>");
}
if (/^.*[0-9]{1,}.*$/.test(input)) {
$(".number").html("<span class='ok'>OK</span>");
} else {
$(".number").html("<span class='no'>NO</span>");
}
if (/^.*[-`=\[\];',\.~!@@#\$%\^&\*\(\)_\+\|\{\}:\"\?]{1,}.*$/.test(input)) {
$(".specificSymbol").html("<span class='ok'>OK</span>");
} else {
$(".specificSymbol").html("<span class='no'>NO</span>");
}
if (input.length >= 8 && input.length <= 16) {
$(".length").html("<span class='ok'>OK</span>");
} else {
$(".length").html("<span class='no'>NO</span>");
}
if (!!input && eq) {
$(".confirmPassword").html("<span class='ok'>OK</span>");
} else {
$(".confirmPassword").html("<span class='no'>NO</span>");
}
}
function keyUpConfirmPassword(e) {
var input = $("#Password").val();
var eq = $("#ConfirmPassword").val() == input;
if (!!input && eq) {
$(".confirmPassword").html("<span class='ok'>OK</span>");
} else {
$(".confirmPassword").html("<span class='no'>NO</span>");
}
}
document.getElementById("Password").onkeyup = keyUp;
document.getElementById("ConfirmPassword").onkeyup = keyUpConfirmPassword;
function ChangePassword() {
var oldPassword = $("#OldPassword").val();
var password = $("#Password").val();
var confirmPassword = $("#ConfirmPassword").val();
var message = "";
if (password != confirmPassword && password != "") {
message = message + "两次输入的密码不相符，请重新输入密码！<br/>";
$("#ConfirmPassword").focus();
}
if (!(password.length >= 8 && password.length <= 16)) {
message = "密码长度需要在8-16位之间！<br/>";
$("#Password").focus();
}
if (!(/^.*[-`=\[\];',\.~!@#\$%\^&\*\(\)_\+\|\{
\}:\"\?]{
1,}.*$/.test(password))) {
message = "需要包含至少一位如下特殊字符-`=[];',.~!@#$%^&*()_+|{}:\"?！<br/>";
$("#Password").focus();
}
if (!(/^.*[0-9]{1,}.*$/.test(password))) {
message = "需要包含数字0...9！<br/>";
$("#Password").focus();
}
if (!(/^.*[A-Za-z]{1,}.*$/.test(password))) {
message = "需要包含小写字母a...z或者大写字母A...Z！<br/>";
$("#Password").focus();
}
if (password.trim() == "") {
message = "密码不能为空，请输入密码！<br/>";
$("#Password").focus();
}
if (oldPassword.trim() == "") {
message = "请输入旧密码！<br/>";
$("#OldPassword").focus();
}
if (message != "")
{
alert(message);
return false;
}
}
</script>
</body>
</html>
方式三实现效果：
