一、下载相关文件
主要文件如下:
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>"
}
}
});