<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单校验</title>
<meta name="author" content="Administrator" />
<script type="text/javascript" src="script/jquery-1.12.2.js"></script>
<style type="text/css">
.int {
margin-bottom: 5px;
}
.sub {
padding-left: 7%;
}
</style>
<!-- Date: 2016-04-03 -->
</head>
<body>
<form action="" method="post">
<div class="int">
<label for="username">用户名：</label>
<input type="text" id="username" class="required" />
</div>
<div class="int">
<label for="email"> 邮箱：</label>
<input type="text" id="email" class="required" />
</div>
<div class="int">
<label for="personinfo">个人资料</label>
<input type="text" id="personinfo" />
</div>
<div class="sub">
<input type="submit" value="提交" id="send" />
<input type="reset" id="res" />
</div>
</form>
<script type="text/javascript">
$(function() {
//为必填的内容加*。
$("form :input.required").each(function() {
var $required = $("<strong class='high'>*</strong>");
$(this).parent().append($required);
});
//为每个文本框失去焦点时做校验。
$("form :input").blur(function() {
var $parent = $(this).parent();
$parent.find(".formtips").remove();
//验证用户名
if($(this).is("#username")){
if(this.value==""||this.value.length<6){
var errorMsg = "请输入至少6位的用户名。";
$parent.append("<span class='formtips onError'>"+ errorMsg+"</span>");
}else{
var okMsg = "输入正确";
$parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>");
}
}
//验证邮箱
if($(this).is("#email")){
if(this.value==""||(this.value!=""&& !/.+@.+\.[a-zA-Z] {2,4}$/.test(this.value))){
var errorMsg = "请输入正确的邮箱地址。";
$parent.append("<span class='formtips onError'>"+ errorMsg+"</span>");
}else{
var okMsg = "请输入正确的邮箱地址。";
$parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>");
}
}
});
});
</script>
</body>
</html>
