码迷,mamicode.com
首页 > 其他好文 > 详细

通用的前端登录验证

时间:2017-08-22 01:53:28      阅读:306      评论:0      收藏:0      [点我收藏+]

标签:ret   load   var   前端   pad   rip   false   ext   input   

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>登录验证</title>
</head>

<body>
<h1>登录验证</h1>
<b id="stuLoginMess" style="color: red;"></b>
<form action="login.html" method="post">
<table border="1" cellpadding="0" width="20%">
<tr>
<td>用户名:</td>
<td><input type="text" id="username" /></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" id="password" /></td>
</tr>
<tr>
<td>验证码:</td>
<td><input type="text" id="code" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" id="submit" value="提交" /> 
<input type="reset" id="reset" value="重置" />
</td>
</tr>
</table>
</form>
<script>
window.onload = function() {
var fm = document.getElementsByTagName(‘form‘)[0];
var stuLoginMess = document.getElementById(‘stuLoginMess‘);
var reset = document.getElementById(‘reset‘);
reset.onclick = function() {
username.value = ‘‘; // 清空
password.value = ‘‘; // 清空
code.value = ‘‘; // 清空
username.focus(); // 将焦点移动到表单字段
};
fm.onsubmit = function() {
if(!/^\w{6,20}$/.test(username.value)) {
stuLoginMess.innerHTML = "* 用户名错误!";
username.value = ""; // 清空
username.focus(); // 将焦点移动到表单字段
return false;
}
if(!/^\w{6,20}$/.test(password.value)) {
stuLoginMess.innerHTML = "* 密码错误!";
password.value = ‘‘; // 清空
password.focus(); // 将焦点移动到表单字段
return false;
}
if(!/^\d{4}$/.test(code.value)) {
stuLoginMess.innerHTML = "* 验证码错误!";
code.value = ‘‘; // 清空
code.focus(); // 将焦点移动到表单字段
return false;
}
return true;
};
};
</script>
</body>

</html>

通用的前端登录验证

标签:ret   load   var   前端   pad   rip   false   ext   input   

原文地址:http://www.cnblogs.com/qubo520/p/7407280.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!