jQuery Validate 使用详解【前端】

最新推荐文章于 2024-03-14 07:00:00 发布

原创最新推荐文章于 2024-03-14 07:00:00 发布 · 734 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery Validate #前端 #数据验证

前端专栏收录该内容

2 篇文章

订阅专栏

该博客介绍了jQuery Validate进行数据验证的方法。首先需下载jquery.validate.min.js和additional - methods.min.js两个文件并在页面引入，接着进行代码编写，展示了index.html和main.js文件代码，最后还提及了自定义验证的效果及main.js文件编写。

一、下载相关文件

主要文件如下：

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