jQuery Validate
前言
jQuery Validate插件為表單提供了強大的驗證功能，讓用戶端表單驗證變得更簡單，同時提供可選的定制選項，以滿足應用程式各種需求。該插件捆綁了一套有用的驗證方法，包括URL和電子郵件驗證，同時提供了一個使用編寫使用者自定義方法的API。所有的捆綁方法替換使用英語作為錯誤資訊，并已翻譯成其他37種語言。
引入js庫
由于每個人放置的位置不一樣，是以相對路徑也會不一樣，自己改下路徑
<script src="/ssm_test/commons/jslib/hplus/js/jquery.min.js"></script>
<script
src="/ssm_test/commons/jslib/hplus/js/plugins/validate/jquery.validate.min.js"></script>
<script
src="/ssm_test/commons/jslib/hplus/js/plugins/validate/messages_zh.min.js"></script>
預設驗證規則
| 規則 | 描述 |
|---|---|
| required | 必須輸入的字段 |
| remote:“check.php” | 使用ajax方法調用check.php驗證輸入值 |
| email:true | 必須輸入正确的電子郵件 |
| url:true | 必須輸入正确的網址 |
| date:true | 必須輸入正确的日期格式。日期檢驗ie6出錯，慎用 |
| dateISO:true | 必須輸入正确格式的日期(ISO),例如：2009-06-23，1998/01.22.隻驗證格式，不驗證有效性 |
| number:true | 必須輸入合法的數字(負數、小數) |
| digits:true | 必須輸入整數 |
| creditcard | 必須輸入合法的信用卡号 |
| equalTo:"#field" | 輸入值必須和#field相同 |
| accept: | 輸入擁有合法字尾名的字元串(上傳檔案的字尾) |
| maxlength:5 | 輸入長度最多是5的字元串(漢字算一個字元) |
| minlength:5 | 輸入長度最小是5的字元串(漢字算一個字元) |
| rangelength:[5,10] | 輸入長度必須介于5和10之間的字元串 |
| range:[5,10] | 輸入值必須介于5和10之間 |
| max:5 | 輸入值不能大于5 |
| min:10 | 輸入值不能小于10 |
Demo
表單：
<form method="post" class="form-horizontal" id="addform" enctype="multipart/form-data">
<div class="form-group">
<label class="col-sm-3 control-label">商品編碼</label>
<div class="col-sm-8 controls">
<input type="text" value="" class="form-control" name="code"
id="product_code" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">商品名稱</label>
<div class="col-sm-8 controls">
<input type="text" value="" class="form-control" name="name"
id="product_name" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">商品類型</label>
<div class="col-sm-8 controls">
<select class="form-control productTypeId" name="type.id" id="product_type">
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">商品品牌</label>
<div class="col-sm-8 controls">
<input type="text" value="" class="form-control" name="brand" id="product_brand"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">商品數量</label>
<div class="col-sm-8 controls">
<input type="text" class="form-control" name="num" id="product_num"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">商品價格</label>
<div class="col-sm-8 controls">
<input type="text" class="form-control" name="price" id="product_price"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">商品介紹</label>
<div class="col-sm-8 controls">
<input type="text" value="" class="form-control" name="intro" id="product_intro"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">商品狀态</label>
<div class="col-sm-8 controls">
<select class="form-control productTypeId" name="status" id="product_status">
<option value="1">在售</option>
<option value="0">下架</option>
</select>
</div>
</div>
<div class="form-group">
<label for="file" class="col-sm-3 control-label">商品圖檔</label>
<div class="col-sm-8 controls">
<input type="file" class="form-control" name="file" id="file"/>
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" class="btn btn-gmtx-define1 center-block">
添加
</input>
</div>
</div>
</form>
js部分：
$("#addform").validate({
rules : {
code:{
required : true,
maxlength: 50
},
name:{
required : true,
maxlength: 50
},
"type.id": {
required : true,
},
brand:{
required:true,
},
num:{
required:true,
},
price:{
required:true,
},
intro:{
required:true,
},
status:{
required:true,
}
},
messages : {
code : {
required : "請輸入商品編碼",
maxlength: "參數名過長"
},
name : {
required : "請輸入商品名稱",
maxlength: "參數名過長"
},
"type.id": {
required : "請選擇商品類型"
},
brand:{
required:"請輸入商品品牌"
},
num:{
required:"請輸入商品數量"
},
price:{
required:"請輸入商品價格"
},
intro:{
required:"請輸入商品介紹"
},
status: {
required:"請選擇商品狀态"
}
},
submitHandler : function() {
//這裡寫驗證成功的邏輯
}
});
測試
下面是一個表單
我們不輸入任何值，直接點選送出，可以看到并沒有執行submit,而是觸發了validate
