最近刷到有关实现简单的用户登录验证的前端题,由于平时基础实践较少,大多使用框架,特总结此博客:
一、先来看一段简单的用户登录验证:
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>