要求
表单验证：
(1)用户名不能为空
(2)用户名必须在6-14位之间
(3)用户名只能由数字和字母组成，不能含有其它符号(正则表达式)
(4)密码和确认密码一致，邮箱地址合法。
(5)统一失去焦点验证
(6)错误提示信息统一在span标签中提示,并且要求字体12号,红色。
(7)文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清宝文本框的value
(8)最终表单中所有项均合法方可提交
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
//获取name文本框id
var nameElt = document.getElementById("name");
//获取name的span的id
var nameSpan = document.getElementById("nameSpanArea");
//获取密码框的id
var pwdElt = document.getElementById("pwd");
//获取密码的span的id
var pwdSpan = document.getElementById("pwdSpanArea");
//获取确认密码框的id
var pwd2Elt = document.getElementById("pwd2");
//获取确认密码的span的id
var pwd2Span = document.getElementById("pwd2SpanArea");
//获取邮箱地址框的id
var emailElt = document.getElementById("email");
//获取邮箱地址的span的id
var emailSpan = document.getElementById("emailSpanArea");
/*给用户名文本框绑定失去焦点事件*/
nameElt.onblur = function(){
//获取用户名
var name = nameElt.value;
//去除前后空格
name = name.trim();
//使用正则表达式判断格式
var nameRegExp = /^(?=.*d)(?=.*[a-zA-Z]).{4,16}$/;
var ok = nameRegExp.test(name);
if (name === "") {
nameSpan.innerText = "用户名不能为空！";
} else if(ok){
nameSpan.innerText = "格式正确";
} else{
nameSpan.innerText = "格式错误，用户名必须在6-14位之间且只能由数字和字母组成";
}
}
/*给用户名文本框绑定获得焦点事件*/
nameElt.onfocus = function(){
//格式错误的话在获得焦点时清空name文本框
if(nameSpan.innerText == "格式错误，用户名必须在6-14位之间且只能由数字和字母组成"){
nameElt.value = "";
}
//获得焦点时清空name的span
nameSpan.innerText = "";
}
/*给密码文本框绑定失去焦点事件*/
pwdElt.onblur = function(){
//获取密码
var pwd = pwdElt.value;
//去除前后空格
pwd = pwd.trim();
if (pwd === "") {
pwdSpan.innerText = "密码不能为空！";
} else{
pwdSpan.innerText = "";
}
}
/*给密码文本框绑定获得焦点事件*/
pwdElt.onfocus = function(){
//格式错误的话在获得焦点时清空密码文本框
if(pwdSpan.innerText == "密码不能为空！"){
pwdElt.value = "";
}
//获得焦点时清空pwd的span
pwdSpan.innerText = "";
}
/*给确认密码文本框绑定失去焦点事件*/
pwd2Elt.onblur = function(){
//获取密码
var pwd2 = pwd2Elt.value;
//去除前后空格
pwd2 = pwd2.trim();
if (pwd2 === "") {
pwd2Span.innerText = "密码不能为空！";
} else if(pwdElt.value == pwd2Elt.value){
pwd2Span.innerText = "密码一致";
} else {
pwd2Span.innerText = "密码不一致";
}
}
/*给确认密码文本框绑定获得焦点事件*/
pwd2Elt.onfocus = function(){
//格式错误的话在获得焦点时清空pwd2文本框
if(pwd2Span.innerText == "密码不一致"){
pwd2Elt.value = "";
}
//获得焦点时清空pwd2的span
pwd2Span.innerText = "";
}
/*给邮箱文本框绑定失去焦点事件*/
emailElt.onblur = function(){
//获取密码
var email = emailElt.value;
//去除前后空格
email = email.trim();
//使用正则表达式判断格式
var emailRegExp = /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/;
var crctEmail = emailRegExp.test(email);
if (email === "") {
emailSpan.innerText = "邮箱不能为空！";
} else if(crctEmail){
emailSpan.innerText = "格式正确";
} else {
emailSpan.innerText = "格式错误";
}
}
/*给邮箱文本框绑定获得焦点事件*/
emailElt.onfocus = function(){
//格式错误的话在获得焦点时清空email文本框
if(emailSpan.innerText == "格式错误"){
emailElt.value = "";
}
//获得焦点时清空email的span
emailSpan.innerText = "";
}
/*给提交按钮绑定onclick事件*/
var submitBtnElt = document.getElementById("submitBtn");
submitBtnElt.onclick = function(){
/*手动触发所有文本框的focus和blur，避免空提交*/
nameElt.focus();nameElt.blur();
pwdElt.focus();pwdElt.blur();
pwd2Elt.focus();pwd2Elt.blur();
emailElt.focus();emailElt.blur();
if (nameSpan.innerText == "格式正确" && pwdSpan.innerText == "" &&
pwd2Span.innerText == "密码一致" && emailSpan.innerText == "格式正确") {
submitBtnElt.type = "submit";
/*第二种方法：
给form表单加上一个id(id="userform")
var userFormElt = document.getElementById("userform");
//提交表单
userFormElt.submit();
*/
} else{
alert("填写数据有误，请重新检查后再提交！");
}
}
}
</script>
<!--这里应该使用post，为了方便检测，改为get-->
<form action="http://localhost:8080/jd/save" method="get">
请输入用户名：<input type="text" id="name" />
<span id="nameSpanArea"></span><br />
请输入密码：<input type="password" id="pwd"/>
<span id="pwdSpanArea"></span><br />
请确认密码：<input type="password" id="pwd2"/>
<span id="pwd2SpanArea"></span><br />
请确认邮箱地址：<input type="email" id="email" />
<span id="emailSpanArea"></span><br />
<input type="button" value="提交" id="submitBtn" />
<input type="reset" value="重置" />
</form>
</body>
</html>
截图
空提交：
用户名只有数字：
密码不一致：
密码不一致后再次获取焦点会自动清空（密码一致就不会清空，上面的用户名同理）：
邮箱格式错误：
所有信息正确后：
点击提交，成功提交：
