<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
span
{
width: 100px;
float: left;
}
.sub
{
padding: 10px 100px;
}
</style>
</head>
<body>
<form action="" method="post">
<div class="int">
<label for="username">
<span>用户名:</span></label>
<input type="text" id="username" class="required" />
</div>
<div class="int">
<label for="email">
<span>邮箱:</span></label>
<input type="text" id="email" class="required" />
</div>
<div class="int">
<label for="personinfo">
<span>个人资料:</span></label>
<input type="text" id="personinfo" />
</div>
<div class="sub" style="display: inline-block">
<input type="submit" id="send" value="提交" />
<input type="reset" id="res" value="重置" />
</div>
</form>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("form .required").each(function () {
var $required1 = $("<strong class='high'>*<strong/>");
$(this).parent().append($required1);
$(this).after($required1);
});
$("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('<div class="formtips onError" style="display: inline-block">' + errorMsg + '</div>');
} else {
var okMsg = '输入正确.';
$parent.append('<div class="formtips OnSuccess" style="display: inline-block">' + okMsg + '</div>');
}
}
if ($(this).is("#email")) {
if (this.value == "" || (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))) {
var errorMsg = '请输入正确的E-Mail地址';
$parent.append('<div class="formtips onError" style="display: inline-block">' + errorMsg + '</div>');
} else {
var okMsg = '输入正确.';
$parent.append('<div class="formtips OnSuccess" style="display: inline-block">' + okMsg + '</div>');
}
}
}).keyup(function () {
$(this).triggerHandler("blur"); //只影响关联的第一个元素,阻止绑定元素的默认行为
}).focus(function () {
$(this).triggerHandler("blur");
});
$("#send").click(function () {
$("form .required").trigger("blur"); //影响关联的所有元素
var numError = $("form .onError").length;
if (numError > 0) {
return false;
}
alert("注册成功,密码已经发到你的邮箱,请查收.");
});
$('#res').click(function () {
$(".formtips").remove();
});
});
</script>
</body>
</html>