jQuery：validate表單驗證基本使用

jquery.validate是jquery的一個驗證框架，能夠迅速驗證一些常見的輸入,而且能夠本身擴充本身的驗證方法!

這裏先從介紹簡單的使用方法：jquery.validate.js下載地址

一、導入js庫

js庫+ jquery.validate.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>

二、 驗證表單：

<form action="" method="get" id="checkform">
姓名：<input type="text" name="name" required/>
郵箱：<input type="email" name="email"  />
<input type="submit" value="提交" />
</form>

三、執行：

<script>
$("#commentForm").validate();
</script>

四、拓展驗證：jquery.validate.js裏面的message有什麼驗證內容type和name值改爲相應的值，如：下面的date

      <input id="new" type="date" name="date"/>

五、修改驗證提示：引入messages_cn.js：

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} 的值") 
}); 

或不引入直接修改，如：

$("#checkform").validate({
 messages: {
        email: "請填寫郵箱郵箱"
    }
});

Demo下載 >>>

備：若是使用class="{}"的方式放正則，必須引入包：jquery.metadata.js，這裏暫不演示