<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script src="jquery-1.4.2.js"></script>
<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-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{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>");
}
}
$("#send").click(function(){
$("form :input.required").trigger("blur");
var numError=$("form .onError").length;
if(numError)
{
return false;
}
alert("注册成功");
});
}).keyup(function(){
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});
});
</script>
<style>
.high{color:red;}
</style>
</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" value="重置" id="res">
</div>
</form>
</body>
</html>