表单是网页的一个重要组成部分。本节做一个简单的表单提交网页然后利用jQuery实现表单的验证。后续的表单完善以及功能的完善会在以后的博客中给出。
效果图：
代码：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<!--
<link href="style.css" rel="stylesheet" type="text/css" /> -->
<style type="text/css">
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}
.int label { float:left; width:100px; text-align:right;}
.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
.sub { padding-left:100px;}
.sub input { margin-right:10px; }
.formtips{width: 200px;margin:2px;padding:2px;}
.onError{
background:#FFE0E9 url(img/reg3.gif) no-repeat 0 center;
padding-left:25px;
}
.onSuccess{
background:#E9FBEB url(img/reg4.gif) no-repeat 0 center;
padding-left:25px;
}
.high{
color:red;
}
</style>
<script type="text/javascript" src="../../../scripts/jquery-1.7.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-Z]{2,4}$/.test(this.value)) ) {
var errorMsg = "请输入正确的E-mail 地址";
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg = "输入正确";
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}
}).keyup(function(){
//这样再输入的时候只要满足条件就能提示，而不用等到失去焦点后再提示
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
}); //最终验证
$("#send").click(function(){
$("form .required:input").trigger("blur");
var numError = $("form .onError").length;
//numError>0,有错，false.阻止表单提交》return false
if(numError){
return false;
}
alert("注册成功，密码已发送至邮箱，注意查收！");
});
}) </script>
</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> </body>
</html>