一、下載相關文件
主要文件如下：
1.jquery.validate.min.js
2.additional-methods.min.js
在頁面中引入上面兩個js文件
<script src="dist/jQuery-validate/jquery.validate.min.js"></script>
<script src="dist/jQuery-validate/additional-methods.min.js"></script>
二、代碼編寫
效果：
index.html代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>商品管理系統</title>
<!-- Bootstrap Core CSS -->
<link href="./dist/bootstrap/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="wrapper" class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">商品出庫</h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="alert alert-success">
<div class="row">
<br><br><br>
</div>
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<form role="form" id="add" action="takeout/add.mvc" method="post" accept-charset="UTF-8" enctype="multipart/form-data">
<div class="form-group has-success">
<label>出庫商品(Product)<font color="red">*</font></label>
<select class="form-control" name="productId" id="product">
<option ></option>
</select>
</div>
<div class="form-group has-success">
<label>出庫數量(Product Quantity)<font color="red">*</font></label>
<input class="form-control" placeholder="請輸入出庫數量" name="quantity" type="number">
</div>
<div class="form-group has-success">
<label>經手人（Handler）<font color="red">*</font></label>
<input type="text" name="handler" class="form-control"placeholder="請輸入您的名字" >
</div>
<button type="submit" class="btn btn-success">提交</button>
<button type="reset" class="btn btn-success">重置</button>
</form>
</div>
</div>
<div class="row">
<br><br><br>
</div>
</div>
</div>
</div>
</div>
<!-- Jquery -->
<script src="./dist/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="./dist/bootstrap/bootstrap.min.js"></script>
<!-- jQuery Validate -->
<script src="dist/jQueryValidate/jquery.validate.min.js"></script>
<script src="dist/jQueryValidate/additional-methods.min.js"></script>
<!-- 表單攔截 -->
<script src="dist/jquery/jquery.form.min.js"></script>
<!-- 自定義的js文件 -->
<script src="main.js"></script>
</body>
</html>
main.js文件：
$(document).ready(function(){
//獲取商品列表
$.getJSON("product/list/all.mvc",function(productList){
$.each(productList,function(index,product){
$("select#product").append("<option value='"+product.id+"'>"+product.productName+"</option>");
});
});
$("form#add").validate({
rules:{
productId:{
required:true
},
quantity:{
required:true,
min:1,
digits:true
},
handler:{
required:true
}
},
messages:{
productId:{
required:"<font color='red'>請選擇出庫商品</font>"
},
quantity:{
required:"<font color='red'>請輸入出庫數量</font>",
min:"<font color='red'>出庫數量必須是大於0的整數</font>",
digits:"<font color='red'>出庫數量必須是一個的整數</font>"
},
handler:{
required:"<font color='red'>請填寫經辦人</font>"
}
}
});
//攔截員工增加表單提交
$("form#add").ajaxForm(function(result){
if(result.status=='200'){
alert("操作成功！");
}
else{
alert(result.message);
}
});
});
三、自定義驗證
1.效果：
2.編寫main.js文件：
//自定義驗證
jQuery.validator.addMethod("isMobile",function(value,element){
var length=value.length;
var mobile=/^1[34578]\d{9}$/;/*/^1(3|4|5|7|8)\d{9}$/*/
return this.optional(element)||(length==11&&mobile.test(value));
},"請正確填寫您的手機號碼");
//驗證郵箱
jQuery.validator.addMethod("isEmail",function(value,element){
var email=/^\w{1,16}@\w{1,16}.\w{2,4}$/;
return this.optional(element)||email.test(value);
},"請正確填寫您的郵箱")
$("form#add").validate({
rules:{
productId:{
required:true
},
quantity:{
required:true,
min:1,
digits:true,
isMobile:true
},
handler:{
required:true,
isEmail:true
}
},
messages:{
productId:{
required:"<font color='red'>請選擇出庫商品</font>"
},
quantity:{
required:"<font color='red'>請輸入出庫數量</font>",
min:"<font color='red'>出庫數量必須是大於0的整數</font>",
digits:"<font color='red'>出庫數量必須是一個的整數</font>",
isMobile:"<font color='red'>手機號碼格式錯誤</font>"
},
handler:{
required:"<font color='red'>請填寫經辦人</font>",
isEmail:"<font color='red'>郵箱格式錯誤</font>"
}
}
});