先给一个设计要求：
1、用户名不能为空
2、用户名必须在6-14位之间
3、用户名只能有数字和字母组成，不能含有其它符号(正则表达式)
4、密码和确认密码一致，邮箱地址合法
5、统一失去焦点验证
6、错误提示信息统一在span标签中提示，要求字体12号，红色
7、文本框再次获得焦点后，清除错误信息，
如果文本框中数据不合法要求清空文本框的value。
8、最终表单中所有项均合法方可提交
废话不多说，直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<style type="text/css">
span{
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
//获取username的span标签
var usernameErrorSpan =
document.getElementById("usernameError");
//给用户名文本框绑定blur事件
var usernameElt = document.getElementById("username");
usernameElt.onblur = function(){
//获取用户名
var username = usernameElt.value;
//去除前后空白
username = username.trim();
//判断用户名是否为空
if(username === ""){
//用户名为空
usernameErrorSpan.innerText="用户名不能为空";
}else{
//用户名不为空
//继续判断长度[6-14]
if(username.length<6||username.length>14){
//用户名长度非法
usernameErrorSpan.innerText = "用户名长度必须在[6,14]之间"
}else{
//用户名长度合法
//继续判断是否有特殊符号
var regExp = /^[A-Za-z0-9]+$/;
var ok = regExp.test(username);
if(ok){
//用户名最终合法
}else{
//用户名含有特殊符号
usernameErrorSpan.innerText =
"用户名含有特殊符号，只能由数字和字母组成";
}
}
}
}
//给username这个文本框绑定获得焦点事件
usernameElt.onfocus = function(){
//清空非法的value
if(usernameErrorSpan.innerText!=""){
usernameElt.value = "";
}
//清空span
usernameErrorSpan.innerText="";
}
//获取密码错误提示的span标签
var pwdErrorSpan = document.getElementById("pwdError");
//获取确认密码框对象
var userpwd2Elt = document.getElementById("userpwd2");
//绑定blur事件
userpwd2Elt.onblur = function(){
//获取密码和确认密码
var userpwdElt = document.getElementById("userpwd");
var userpwd = userpwdElt.value;
var userpwd2 = userpwd2Elt.value;
if(userpwd != userpwd2){
//密码不一致
pwdErrorSpan.innerText="密码不一致";
}else{
//密码一致
}
}
//给确认密码绑定焦点事件
userpwd2Elt.onfocus = function(){
if(pwdErrorSpan.innerText != ""){
userpwd2Elt.value = "";
}
pwdErrorSpan.innerText = "";
}
//获取email的span
var emailSpan = document.getElementById("emailError");
//给email绑定blur事件
var emailElt = document.getElementById("email");
emailElt.onblur = function(){
//获取email
var email = emailElt.value;
//编写email正则
var emailRedExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok = emailRedExp.test(email);
if(ok){
//合法
}else{
//不合法
emailSpan.innerText="邮箱地址不合法";
}
}
//给emailElt绑定onfocus
emailElt.onfocus = function(){
if(emailSpan.innerText!=""){
emailElt.value = "";
}
emailSpan.innerText = "";
}
//给提交按钮绑定鼠标单击事件
var submitBtnElt = document.getElementById("submitBtn");
submitBtnElt.onclick = function(){
//触发username的blur userpwd2的blur email的blur
usernameElt.focus();
usernameElt.blur();
userpwd2Elt.focus();
userpwd2Elt.blur();
emailElt.focus();
emailElt.blur();
//当所有表单都是合法的时候,提交表单
if(usernameErrorSpan.innerText == ""&&pwdErrorSpan.innerText
==""&&emailSpan.innerText == ""){
var userFormElt = document.getElementById("userForm");
userFormElt.action = "http://localhost:8080/jd/save";
userFormElt.submit();
}
}
}
</script>
<form id="userForm">
用户名<input type="text" name="username" id="username" />
<span id="usernameError"></span>
<br>
密码<input type="text" name="userpwd" id="userpwd" />
<br>
确认密码<input type="text" id="userpwd2"/>
<span id="pwdError"></span>
<br>
邮箱<input type="text" name="email" id="email"/>
<span id="emailError"></span>
<br>
<input type="button" value="注册" id = "submitBtn"/>
<input type="reset" value="重置" />
</form>
</body>
</html>
利用DOM机制对表单中的内容进行判断，其中要掌握的是如何获取标签对象、绑定事件、以及正则表达式的使用。
版权声明：本文为clearlove66原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。