JavaScript实现用户登录验证进阶篇

最近刷到有关实现简单的用户登录验证的前端题，由于平时基础实践较少，大多使用框架，特总结此博客：

一、先来看一段简单的用户登录验证：

body{
    text-align: center;
}
#content{
    /*水平居中外盒子*/
    display: inline-block; 
    margin-top: 200px;
}
#login{
    /*登录模块水平垂直居中*/
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    width:500px;
    height:400px;
    background: grey;
}
#text{
    line-height: 50px;
}

<div id="content">
	<div id="login">
		<div id="text"><label>用户名：</label><input type="text" name="username" placeholder="请输入用户名" id="username"></div>
		<div id="text"><label>密    码：</label><input type="password" name="password" placeholder="请输入密码" id="password"></div>
		<button type="submit" onclick="check()">登录</button>
	</div>
    </div>

<script type="text/javascript">
	function check() {
            if(document.getElementById("username").value=="") {
		    alert("没有输入用户名！");
		    return false;
	     } else if(document.getElementById("password").value=="") {
		    alert("没有输入密码！");
		    return false;
	     } else {
		    alert("提交成功！")
		    return true;
             }
        }
</script>

二、再来看稍微复杂一点的使用正则表达式进行登录验证：

.ok {
    color: green;
    border: 1px solid green;
}
.error {
    color: red;
    border: 1px solid red;
}

<div id="content">
    <div id="login">
	<p>
	    账号：
	    <input type="text" id="code" onblur="check_code()"/>
	     <span id="code_msg">6-10位字母、数字、下划线</span>
	</p>
	<p>
	    密码：
	    <input type="text" id="pwd" onblur="check_pwd()" />
	    <span id="pwd_msg">8-20位字母、数字、下划线</span>
	</p>
	<p><input type="submit" value="登录"/></p>
    </div> 
</div>

<script type="text/javascript">
    //校验账号的格式
    function check_code() {
	//获取账号
        var code = document.getElementById("code").value;
	//校验其格式(\w字母或数字或下划线)
        var span = document.getElementById("code_msg");
        var reg = /^\w{6,10}$/;
        if(reg.test(code)) {
	    //通过，增加ok样式
	    span.className = "ok";
	 } else {
	    //不通过，增加error样式
	    span.className = "error";
	}
    }
    function check_pwd(){
	var code2 =document.getElementById("pwd").value;
        var span2 = document.getElementById("pwd_msg");
	var reg2 = /^\w{6,10}$/;
	if(reg2.test(code2)) {
	    span2.className = "ok";
	} else {
	    span2.className = "error";
	}
    }
</script>