表单验证：(四个文本框：用户名、密码、确认密码、邮箱地址)
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>
<!--
1.用户名不能为空
2.用户名必须在6-14之间
3.用户名只能由数字和字母组成，不能含有其他符号(正则表达式)
4.密码和确认密码一致，邮箱地址合法
5.统一失去焦点验证
6.错误提示信息统一在span标签中提示，并且要求字体12号，红色
7.文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
8.最终表单中所有项均合法方可提交
-->
<body>
<!--这个表单提交应该使用post，这里为了检测，使用get-->
<form id="userform" action="http://localhost:8080/oa/save" method="get">
用户名<input type="text" id="username" name="username" />
<span id="usernameError"></span><br>
密码<input type="text" id="password" name="userpwd"/>
<br>
确认密码<input type="text" id="passwordCheck"/>
<span id="pwdError"></span><br>
邮箱地址<input type="text" id="email" name="email"/>
<span id="emailError"></span><br>
<!--<input type="submit" value="注册">-->
<input type="button" id="submitBtn" value="提交"/>
<input type="reset" value="重置">
</form>
<span id="check" style="color: red;font-size: 12px;"></span>
<script type="text/javascript">
window.onload=function(){
//给用户名文本框绑定blur事件
var usernameElt=document.getElementById("username");
//获取username的span标签
var usernameSpanError=document.getElementById("usernameError");
usernameElt.onblur=function(){
//获取用户名
var username=usernameElt.value;
//去除前后空白
username=username.trim();
//username正则表达式
usernameExp=/^[1-9a-zA-Z]+$/;
//判断用户名长度
if(username.length<6 || username.length>14){
usernameSpanError.innerText="用户名必须在6-14之间";
usernameElt.value="";
}
//判断用户名value是否只有数字和字母
if(!(usernameExp.test(username))){
usernameSpanError.innerText="用户名只能是数字或字母";
usernameElt.value="";
}
}
//给用户名文本框绑定focus事件
usernameElt.onfocus=function(){
//清空错误提示信息
usernameSpanError.innerText="";
}
//给确认密码文本框绑定blur事件
var pwdCheck=document.getElementById("passwordCheck");
var pwdSpanError=document.getElementById("pwdError");
pwdCheck.onblur=function(){
pwd=document.getElementById("password")
var password=pwd.value;
if(password!=pwdCheck.value){
pwdSpanError.innerText="密码不一致";
pwdCheck.value="";
}
}
pwdCheck.onfocus=function(){
document.getElementById("pwdError").innerText="";
}
var emailElt=document.getElementById("email");
var emailSpanError=document.getElementById("emailError");
//给邮箱文本框绑定blur事件
emailElt.onblur=function(){
var emailExp=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
var email=emailElt.value;
email=email.trim();
if(!emailExp.test(email)){
emailSpanError.innerText="邮箱错误";
emailElt.value="";
}
}
emailElt.onfocus=function(){
document.getElementById("emailError").innerText="";
}
var submitBtn=document.getElementById("submitBtn");
//给按钮绑定鼠标单击事件
submitBtn.onclick=function(){
//触发usernameElt的blur、pwdCheck的blur、emailElt的blur
usernameElt.focus();
usernameElt.blur();
pwdCheck.focus();
pwdCheck.blur();
emailElt.focus();
emailElt.blur();
//所有表单项目合法则提交表单
if(usernameSpanError.innerText=="" && pwdSpanError.innerText=="" && emailSpanError.innerText==""){
document.getElementById("userform").submit();
}
else{
alert("error!!!");
}
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号