首页
登录 | 注册

通用的前端登录验证

<!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>


相关文章

  • 为什么说 Java 程序员到了必须掌握 Spring Boot 的时候?
    Spring Boot 2.0 的推出又激起了一阵学习 Spring Boot 热,就单从我个人的博客的访问量大幅增加就可以感受到大家对学习 Spring Boot 的热情,那么在这么多人热衷于学习 Spring Boot 之时,我自己也在 ...
  • 一.背景: 项目中有一些特殊的需求,如个别渠道继承腾讯bugly,个别渠道集成易观统计,不同的渠道集成不同的推送策略(如Oppo渠道优先Opush推送),不同的渠道拥有不同的第三方登录集成等等.这些需求本身,往往都与外部集成进来的功能有关, ...
  • Windbg分析高内存占用问题
    1. 问题简介 最近产品发布大版本补丁更新,一商超客户升级后,反馈系统经常奔溃,导致超市的收银系统无法正常收银,现场排队付款的顾客更是抱怨声声.为了缓解现场的情况, 客户都是手动回收IIS应用程序池才能解决. 这样的后果是很严重的,接到反馈 ...
  • 1.什么是跨越? 一个网页向另一个不同域名/不同协议/不同端口的网页请求资源,这就是跨域. 跨域原因产生:在当前域名请求网站中,默认不允许通过ajax请求发送其他域名. 2.为什么会产生跨域请求? 因为浏览器使用了同源策略 3.什么是同源策 ...
  • TensorFlow之DNN(三):神经网络的正则化方法(Dropout、L2正则化、早停和数据增强)
    这一篇博客整理用TensorFlow实现神经网络正则化的内容. 深层神经网络往往具有数十万乃至数百万的参数,可以进行非常复杂的特征变换,具有强大的学习能力,因此容易在训练集上过拟合.缓解神经网络的过拟合问题,一般有两种思路,一种是用正则化方 ...
  • 对于初学者,或者没有接触过网络编程的程序员,会觉得网络编程涉及的知识很高深,很难,其实这是一种误解,当你的语法熟悉以后,其实基本的网络编程现在已经被实现的异常简单了. 网络通信作为互联网的技术支持,已被广泛应用在软件开发中,无论是Web,服 ...

2019 cecdns.com webmaster#cecdns.com
12 q. 0.076 s.
京ICP备10005923号