html 页面
用户名:<input type="text" id="username" name="">
<br>
密码: <input type="password" id="userpwd" name="">
<br>密码强度:<span id="mm"></span><br>
验证码:<input type="text" id="yzm" name="">
<span id="testSpan"></span>
<br>
<input type="button" id="login" value="登录" name=""
JS代码块
var module = (function() {
var testSpan,msg,Slength,userpwd,userpwd,yzm;
function print(msg) {
alert(msg);
} ;//弹出消息框
//简单的验证码
function createyzm(testSpan,Slength){
var str = "0123456789qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM";
var list = str.split("");
for (i = 0; i < Slength; i++)
{
var index = Math.floor(Math.random() * list.length);
testSpan.style.backgroundColor="#000";//验证码背景颜色
testSpan.style.color="#fff";//验证码颜色
testSpan.style.display="block";
testSpan.style.textAlign ="center";
testSpan.style.width="70px";//长度
testSpan.innerHTML += list[index];
}
return testSpan.innerHTML;
};
function checkUserpwd(userpwd,errSpan) {
var numCount = (/[0-9]/g).test(userpwd) ? 1 : 0;
var lowCount = (/[a-z]/g).test(userpwd) ? 1 : 0;
var uppCount = (/[A-Z]/g).test(userpwd) ? 1 : 0;//二元运算符
switch (numCount + lowCount + uppCount) {
case 3:
errSpan.innerHTML = "强";
break;
case 2:
errSpan.innerHTML = "中";
break;
default:
errSpan.innerHTML = "弱";
break;
return true;
}
};
function check(username,userpwd)
{
var uremeber = /^[a-zA-Z0-9_-]{4,16}$/;
var username=username.replace(" ","");
var userpwd=userpwd.replace(" ","");//去空格防止sql注入
if(username==""||userpwd=="")
{
print("用户名密码不能为空");
return false;
}
if(!uremeber.test(username)||!uremeber.test(userpwd))
{
print("用户名密码为为4-16位但不限于(数字,字母,下划线)");
history.go(0);//刷新页面
return false;
}
else {
//...
return true;
}
};
return {
checkUserpwd: checkUserpwd,//两个参数userpwd,errSpan errspan为提示密码强弱提示性文字,接受类型是js dom对象 注:jq对象用test方法,
// userpwd 为用户密码,
check: check,//用户名,密码,验证码
createyzm: createyzm,//testSpan,Slength 两个参数testSpan是验证码span标签dom类型对象,Slength是验证码长度
print: print//alert弹窗
};
})();
var yzm=module.createyzm(document.getElementById("testSpan"),4);
document.getElementById("userpwd").onblur = function(){
module.checkUserpwd(this.value,document.getElementById('mm'));
}
document.getElementById("login").onclick=function(){
var a= module.check(document.getElementById("username").value,document.getElementById("userpwd").value);
if(a==true )
{
if(document.getElementById("yzm").value==yzm)
{alert("登录成功!");}
else{
alert("验证码错误,请重新输入!");
history.go(0);//刷新页面
}
}
}