<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<fieldset>
<legend>用户注册页</legend>
<form id="myform">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" id="user"></td>
<td><div id="userTip"></div></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" id="pwd"></td>
<td><div id="pwdTip"></div></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" id="repwd"></td>
<td><div id="repwdTip"></div></td>
</tr>
<tr>
<td>email地址：</td>
<td><input type="password" id="email"></td>
<td><div id="emailTip"></div></td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="rigist" value="注册"></td>
<td></td>
</tr>
</table>
</form>
</fieldset>
<script>
/*
表单验证需求:
不能为空,只能输入英文+数字,长度在6-12位
密码:
不能为空,只能输入英文,长度在6-8之间
确认密码:
与密码的要求一致
email:不能为空
效果:
获取焦点事件,要给出输入提示内容
失去焦点事件,完成对应元素的验证
验证成功 - 输入正确的提示
验证失败 - 输入错误的提示
当提交表单之前,保证表单内所有元素全部都是验证通过的。
*/
//1用户名验证
$("#user").focus(function(){
$("#userTip").text("请输入英文或数字,长度在6-12位之间").css({"color":"black"});
}).blur(function(){
var regExp=/^[a-zA-Z0-9]{6,12}$/;
var $myval=$("#user").val();
if ($myval==""|| $myval==null) {
$("#userTip").text("用户名输入不能为空").css({
"color":"red",
"font-weight":"bold"
});
}
else if(!regExp.test($myval)){
$("#userTip").text("用户名输入错误").css({
"color":"red",
"font-weight":"bold"
});
}
else{
$("#userTip").text("输入正确").css({
"color":"green",
"font-weight":"bold"
});
}
});
</script>
</body>
</html>
