<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">在網頁開發過程中Form的驗證或者表單驗證操作都是必不可少的。如今有許多的驗證插件，這裏只介紹JQuery Validation.js的插件使用，這個也是VS中自帶的驗證腳本。</span>JQuery使用上也很廣泛兼容性也很好，是許多開發人員的最佳選擇，還有其它的驗證插件有EasyUI. bootstrap框架的驗證方式（bootstrap jQuery-Validation-Bootstrap-tooltip demo).針對bootstrap主要還是它的響應式的排
版，移動終端及電腦都可以訪問。
關於JQuery.Validation.js的使用上可以參考博文，人家寫得很全。
Bootstrap中的表單很多都是用div模擬form的。網上查好許多都是驗證表單都在在form裏，如果是DIV我們的驗證方法是不是還是可以使用呢？而且在提交按鈕中，如果我提交按鈕
不是type類型，我又是如何去提交驗證的form呢？以下主要是解決這兩個問題，如果能解決此兩個問題自然你應該會使用驗證插件。
<!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 rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css"/>
<script type="text/javascript" src="bootstrap/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="scripts/jquery.validation.message.cn.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap/jQuery-Validation-Bootstrap-tooltip.js"></script>
<script type="text/javascript">
$(function(){
/*triggle button event by maunal*/
$("a.btn").click(function(){
$("#myModal").modal("show");
});
/*Submit form*/
$("#webinarForm").validate({
rules:{
fullname:{required:true,isName:true,minlength:2},
email:{required:true,email:true},
tel:{required:true,isTel:true},
qq:{isQQ:true}
},
nsubmit:true,
onclick:true,
focusInvalid:true,
focusCleanup:false,
validClass: "",
errorClass:"text-error",
errorElement:"em",
tooltip_options:{
"_all_":{placement:"top"}
},
submitHandler:function(form){
alert("submit");
//comment out AJAX for demo
/*$.ajax({
type:post,
url:"",
dataType:"text",
data:"",
success: function(){
alert("success");
},
error:function(data,xhrStatus){
alert("error");
},
complete:function(){
alert("complete");
}
});*/
},
showErrors: function(errorMap, errorList) {
alert("Your form contains " + this.numberOfInvalids() + " errors, see details below.");
this.defaultShowErrors();
},
invalidHandler: function(form, validator) {
alert("There are "+this.numberOfInvalids()+" errors");
}
});
/*Submit form*/
})
</script>
<style type="text/css">
.text-error {
color: red;
}
</style>
</head>
<body>
<a class="btn btn-default">Click Me</a>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">GKFX-網絡講座註冊</h3>
</div>
<div class="modal-body">
<form id="webinarForm">
<div class="form-group">
<label>全名</label>
<input name="fullname" class="form-control required" data-placement="top" data-trigger="manual" data-content="Must be at least 3 characters long, and must only contain letters." type="text">
</div>
<div class="form-group">
<label>郵件</label>
<input name="email" class="form-control email" data-placement="top" data-trigger="manual" data-content="Must be a valid e-mail address ([email protected])" type="text">
</div>
<div class="form-group">
<label>電話</label>
<input name="tel" class="form-control phone" data-placement="top" data-trigger="manual" data-content="Must be a valid phone number (999-999-9999)" type="text">
</div>
<div class="form-group">
<label>QQ號碼</label>
<input name="qq" class="form-control phone" data-placement="top" data-trigger="manual" data-content="Must be a valid phone number (999-999-9999)" type="text">
</div>
<div class="form-group modal-footer">
<input type="submit" class="btn btn-success pull-right" value="馬上註冊"/>
<p class="help-block pull-left text-danger hide" id="form-error"> The form is not valid. </p>
</div>
<input type="hidden" id="dialogId"/>
</form>
<div class="clear"><span></span></div>
</div>
</div>
</div>
</div>
</body>
</html>
// JavaScript Document
/**
*Override the default messages with Chinese format.
*
*/
jQuery.extend(jQuery.validator.messages,{
required:"必填字段",
remote:"請修正字段",
email:"請輸入正確格式的電子郵件",
url:"請輸入有效網址",
date:"請輸入有效日期",
dateISO:"請輸入合法日期(ISO)",
number:"請輸入數值",
digits:"請輸入整數",
creditcard:"請輸入有效信用卡號",
equalTo:"請再次輸入相同值",
accept:"請輸入擁有合法後綴名的字符串",
maxlength:jQuery.validator.format("最大長度爲{0}"),
minlength:jQuery.validator.format("最小長度爲{0}"),
rangelength:jQuery.validator.format("長度介於{0}和{1}的值"),
range:jQuery.validator.format("值應介於{0}和{1}"),
max:jQuery.validator.format("值最大爲{0}"),
min:jQuery.validator.format("值最小爲{0}")
});
/**
*Validaet Mobile phone.
*
*/
jQuery.validator.addMethod("isTel",function(value,element){
var pattern=/^1[3|5|8]\d{9}$/;
return this.optional(element)||pattern.test(value);
},"請填寫正確手機號碼")
/**
*Validaet Chinese family name.
*
*/
jQuery.validator.addMethod("isName",function(value,element){
var pattern = /^[\u4e00-\u9fa5_\.a-zA-Z]+$/;
return this.optional(element)||pattern.test(value);
},"名字格式不正確")
/**
*Value QQ
*/
jQuery.validator.addMethod("isQQ",function(value,element){
var pattern=/^[1-9](\d){4,9}$/;
return this.optional(element)||pattern.test(value);
},"QQ號碼格式不對")
/**
Validate Postal Code
*/
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "郵政編碼格式不對"); 
