jquery validate 单个校验+全部校验

最新推荐文章于 2022-11-09 11:34:56 发布
最新推荐文章于 2022-11-09 11:34:56 发布
阅读量3.2k 收藏 1
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zziamalei/article/details/45075213
版权

1、引入  

   

<script src="/poobo/js/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>


<script type="text/javascript" src="/poobo/js/jquery/jquery.validate.min.js"></script>

2、页面form

    

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"  isELIgnored="false"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@include file="/poobo/public/common.jspf"%>
<title><s:if test="postType=='new'">新增</s:if><s:else>编辑</s:else>商铺</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />

<link rel="stylesheet" href="/css/jquery/jquery.fileupload-ui.css">
<script src="/js/jquery/jquery.fileupload.js"></script>
		<script src="/js/jquery/jquery.fileupload-ui.js"></script>
<script type="text/javascript" src="/poobo/js/store/store_detail.js"></script>


</head>
<body>

	<div class="main">
		<div class="mainBox">
			<h2><s:if test="postType=='new'">新增</s:if><s:else>编辑</s:else>商铺</h2>
			<div class="buyOrderList" style="width:98%; margin: 10px auto 0;">
			
			<!-- 需要提交的表单   start -->
				<form id="submitForm" name="submitForm" method="POST" enctype="multipart/form-data">
             <!-- ************** -->
					
						<input type="hidden" name="store.storeType" id="store.storeType" value="<s:property value="store.storeType"/>">
						<input type="hidden" name="store.status" id="store.status" value="<s:property value="store.status"/>">
						<input type="hidden" name="store.createDate" id="createDate" value="<s:property value="store.createDate"/>">
						<input type="hidden" name="postType" id="postType" value="<s:property value="postType"/>">
						<input type="hidden" name="store.globalId" id="globalId" value="<s:property value="store.globalId"/>">
						<input type="hidden" name="userGlobalId" id="userGlobalId" value="<s:property value="store.user.globalId"/>">
						<input id="img1" type="hidden" name="store.picPath" value="<s:property value="store.picPath" />" />
						<table width="100%" border="0" cellpadding="3" cellspacing="1">
							<tbody>
								<tr>
									<td class="left_title_1" width="20%"> 商铺类别<b> : </b></td>
									<td class="left_title_4" >
								              	<select name="storeCategoryId" style="width:75px;" class="valid">
								              	           
													       <option value="1" <s:if test="store.storeCategory.storeCategoryId==1">selected="selected" </s:if>>旅游</option>
													       <option value="2" <s:if test="store.storeCategory.storeCategoryId==2">selected="selected" </s:if>>餐饮</option>
													       <option value="3" <s:if test="store.storeCategory.storeCategoryId==3">selected="selected" </s:if>>服装</option>
													       <option value="4" <s:if test="store.storeCategory.storeCategoryId==4">selected="selected" </s:if>>零售</option>
													       <option value="5" <s:if test="store.storeCategory.storeCategoryId==5">selected="selected" </s:if>>教育/培训</option>
													       <option value="6" <s:if test="store.storeCategory.storeCategoryId==6">selected="selected" </s:if>>宾馆</option>
													       <option value="7" <s:if test="store.storeCategory.storeCategoryId==7">selected="selected" </s:if>>体育运动</option>
													      
													</select>
													
										 <span class="star">*</span>
										 <span class="tishi"></span>		
 
									</td>
								</tr>
								<!-- <tr>
									<td class="left_title_1" width="20%"><span class="text-error">* </span>商铺类型<b> : </b></td>
									<td class="left_title_4" width="80%">
                                        <input type="radio" name="storeType" value="0" >普通商户<input type="radio" name="storeType"  value="1">运营商商户
									</td>
								</tr> -->
								
								<tr>
									<td class="left_title_1" width="20%"> 商铺名称<b> : </b></td>
									<td class="left_title_4" width="80%">

										 <input type="text" id="storeName" name="store.storeName" value="<s:property value="store.storeName" />" size="20" maxlength="40">
										 <span class="star">*</span>
										 <span class="tishi"></span>
										 </td>
								</tr>
								
								<!-- <tr>
									<td class="left_title_1">   所属区域 <b> : </b></td>
									<td class="left_title_4">广东 东莞市</td>
								</tr> -->
								<!-- <tr>
									<td class="left_title_1"><span class="text-error">*
									</span>详情<b> : </b></td>
									<td class="left_title_4"><input type="text" name="storeInfo"  id="store_storeInfo">

									</td>
								</tr> -->
								
								<tr>
									<td class="left_title_1"> 联系电话<b> : </b></td>
									<td class="left_title_4"><input type="text" name="store.phone" size="20" maxlength="11" value="<s:property value="store.phone" />" id="store_phone">
									 <span class="star">*</span>
										 <span class="tishi"></span>
									</td>
								</tr>
								<tr>
									<td class="left_title_1"> 营业时间<b> : </b></td>
									<td class="left_title_4"><input type="text" name="store.mainDate" size="20" value="<s:property value="store.mainDate" />" id="mainDate">
									 <span class="star">*</span>
										 <span class="tishi"></span>
									</td>
								</tr>
								<tr>
									<td class="left_title_1"> 简介<b> : </b></td>
									<td class="left_title_4">
									<textarea name="store.storeSampleInfo" class="member-normal-normalarea" style="width:500px;height:50px;"><s:property value="store.storeSampleInfo" /></textarea>
									 <span class="star">*</span>
										 <span class="tishi"></span> 
									</td>
								</tr>
								<tr>
									<td class="left_title_1"> 详细地址<b> : </b></td>
									<td class="left_title_4">
									 <textarea name="store.address" class="member-normal-normalarea" style="width:500px;height:50px;"><s:property value="store.address" /></textarea> 
									  <span class="star">*</span>
										 <span class="tishi"></span>
									 <span class="help-block">为了客户能准确找到您的店铺，请按照格式填写：_省_市_县（区）_ </span>
									</td>
								</tr>
								<tr>
									<td class="left_title_1"> 最高额度<b> : </b></td>
									<td class="left_title_4">
									 <%--  <input type="text" name="store.storeAccount.limitMoney" value="<s:property value="store.storeAccount.limitMoney"/>" <s:if test="postType=='update'">readonly="readonly"</s:if>  size="20" id="limitMoney"/> --%>
									 
									 <s:if test="postType=='new'">
									    <input type="text" name="store.storeAccount.limitMoney"  size="20" id="limitMoney"/>
									    <span class="star">*</span>
									    <span class="tishi"></span>
									 </s:if>
									 <s:else>
									
									  <span><s:property value="store.storeAccount.limitMoney"/></span>
									 </s:else>
									  
									
									</td>
								</tr>
								
								<tr>
								<td class="left_title_1">    地图标记<b>
										: </b></td>
								<td class="left_title_4"><span id="spanIsShow" style="color:blue; font-size:12px;">【地图帮助】</span>
									<div id="divIntro">
										<p>1：鼠标滚轮可以控制地图的放大和缩小</p>
										<p>
											2：红色标记为商铺当前位置，可以通过<span style="color:red;">鼠标拖拽和点击来指定新的位置</span>
										</p>
										<p>
											3：搜索框可以通过名称快速定位 ,方便您定位自己的商铺位置 <input id="txtSearch" type="text"><input type="button" value="GO" οnclick="searchKeyMap()">
										</p>
										<p>
											4：手动输入商铺位置 ,经度：<input name="store.mapLat" id="mapLat" type="text" style="width:120px" value="<s:property value="store.mapLat" />">
											                                          纬度：<input name="store.mapLng" id="mapLng" type="text" style="width:120px" value="<s:property value="store.mapLng" />">
										</p>
									</div>
									<div class="map" id="map_canvas" style="width: 600px; height: 400px; overflow: hidden; position: relative; z-index: 0; color: rgb(0, 0, 0); text-align: left; background-image: url(http://api.map.baidu.com/images/bg.png);"><div id="platform" style="overflow: visible; position: absolute; z-index: 0; left: 0px; top: 0px; cursor: url(http://api.map.baidu.com/images/openhand.cur) 8 8, default;"><div style="position: absolute; z-index: -1; left: 300px; top: 200px; display: block;"><img src="http://online2.map.bdimg.com/tile/?qt=tile&x=1610&y=277&z=13&styles=pl&udt=20140928" style="position: absolute; border: none; width: 512px; height: 512px; left: -774px; top: -701px;"><img src="http://online2.map.bdimg.com/tile/?qt=tile&x=1611&y=276&z=13&styles=pl&udt=20140928" style="position: absolute; border: none; width: 512px; height: 512px; left: -262px; top: -189px;"><img src="http://online2.map.bdimg.com/tile/?qt=tile&x=1612&y=275&z=13&styles=pl&udt=20140928" style="position: absolute; border: none; width: 512px; height: 512px; left: 250px; top: 323px;"><img src="http://online1.map.bdimg.com/tile/?qt=tile&x=1611&y=275&z=13&styles=pl&udt=20140928" style="position: absolute; border: none; width: 512px; height: 512px; left: -262px; top: 323px;"><img src="http://online1.map.bdimg.com/tile/?qt=tile&x=1609&y=277&z=13&styles=pl&udt=20140928" style="position: absolute; border: none; width: 512px; height: 512px; left: -1286px; top: -701px;"></div><div id="mask" class=" BMap_mask" style="position: absolute; left: 0px; top: 0px; z-index: 9; overflow: hidden; -webkit-user-select: none; width: 600px; height: 400px;"></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 200;"><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 800;"></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 700;"><span class="BMap_Marker BMap_noprint" unselectable="on"  style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; width: 23px; height: 25px; left: -32551px; top: -20471px; z-index: -4568906; background: url(http://api.map.baidu.com/images/blank.gif);" title=""></span></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 600;"></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 500;"></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 400;"><span class="BMap_Marker" unselectable="on" style="position: absolute; padding: 0px; margin: 0px; border: 0px; width: 0px; height: 0px; left: -32541px; top: -20446px; z-index: -4568906;"><div style="position: absolute; margin: 0px; padding: 0px; width: 23px; height: 25px; left: -10px; top: -25px; overflow: hidden;"><img src="http://api.map.baidu.com/images/marker_red.png" style="border:none;left:0px; top:0px; position:absolute;"></div></span></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 200;"></div></div><div style="position: absolute; z-index: -1; left: 300px; top: 200px;"><img src="http://online1.map.bdimg.com/tile/?qt=tile&x=3222&y=554&z=14&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -263px; top: -446px;"><img src="http://online2.map.bdimg.com/tile/?qt=tile&x=3223&y=554&z=14&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -7px; top: -446px;"><img src="http://online0.map.bdimg.com/tile/?qt=tile&x=3223&y=552&z=14&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -7px; top: 66px;"><img src="http://online2.map.bdimg.com/tile/?qt=tile&x=3224&y=553&z=14&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: 249px; top: -190px;"><img src="http://online0.map.bdimg.com/tile/?qt=tile&x=3222&y=553&z=14&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -263px; top: -190px;"><img src="http://online1.map.bdimg.com/tile/?qt=tile&x=3224&y=552&z=14&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: 249px; top: 66px;"><img src="http://online4.map.bdimg.com/tile/?qt=tile&x=3222&y=552&z=14&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -263px; top: 66px;"><img src="http://online1.map.bdimg.com/tile/?qt=tile&x=3223&y=553&z=14&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -7px; top: -190px;"><img src="http://online0.map.bdimg.com/tile/?qt=tile&x=3221&y=554&z=14&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -519px; top: -446px;"><img src="http://online3.map.bdimg.com/tile/?qt=tile&x=3221&y=552&z=14&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -519px; top: 66px;"><img src="http://online3.map.bdimg.com/tile/?qt=tile&x=3224&y=554&z=14&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: 249px; top: -446px;"><img src="http://online4.map.bdimg.com/tile/?qt=tile&x=3221&y=553&z=14&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -519px; top: -190px;"></div></div><div id="zoomer" style="position: absolute; z-index: 0; top: -42.5px; left: 476px; overflow: hidden; visibility: hidden; cursor: url(http://api.map.baidu.com/images/openhand.cur) 8 8, default; width: 120px; height: 91px;"><div class="BMap_zoomer" style="top: 0px; left: 0px; background-position: 0px 0px;"></div><div class="BMap_zoomer" style="top: 0px; right: 0px; background-position: -7px 0px;"></div><div class="BMap_zoomer" style="bottom: 0px; left: 0px; background-position: 0px -7px;"></div><div class="BMap_zoomer" style="bottom: 0px; right: 0px; background-position: -7px -7px;"></div></div><div class=" anchorBL" style="height: 32px; position: absolute; z-index: 10; bottom: 0px; right: auto; top: auto; left: 1px;"><a title="到百度地图首页" target="_blank" href="http://map.baidu.com/?sr=1" style="outline: none;"><img style="border:none;width:77px;height:32px" src="http://api.map.baidu.com/images/copyright_logo.png"></a></div><div unselectable="on" class=" BMap_cpyCtrl anchorBL" style="cursor: default; white-space: nowrap; bottom: 2px; right: auto; top: auto; left: 81px; position: absolute; z-index: 10;"><span style="color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; font-size: 11px; line-height: normal; font-family: arial, simsun; display: inline; background: none;" _cid="1">© 2015 Baidu</span></div><div unselectable="on" class=" BMap_stdMpCtrl BMap_stdMpType0 BMap_noprint anchorTL" style="width: 52px; height: 226px; bottom: auto; right: auto; top: 10px; left: 10px; position: absolute; z-index: 1100;"><div class="BMap_stdMpPan"><div class="BMap_button BMap_panN" title="向上平移"></div><div class="BMap_button BMap_panW" title="向左平移"></div><div class="BMap_button BMap_panE" title="向右平移"></div><div class="BMap_button BMap_panS" title="向下平移"></div><div class="BMap_stdMpPanBg BMap_smcbg"></div></div><div class="BMap_stdMpZoom" style="height: 167px; width: 52px;"><div style="height: 167px; width: 37px;"><div class="BMap_button BMap_stdMpZoomIn" title="放大一级"><div class="BMap_smcbg"></div></div><div class="BMap_button BMap_stdMpZoomOut" title="缩小一级"><div class="BMap_smcbg"></div></div></div><div class="BMap_stdMpSlider" style="height: 133px;"><div class="BMap_stdMpSliderBgTop" style="height: 124px;"><div class="BMap_smcbg"></div></div><div class="BMap_stdMpSliderBgBot" style="top: 124px;"><div class="BMap_smcbg"></div></div><div class="BMap_stdMpSliderMask" title="放置到此级别"></div><div class="BMap_stdMpSliderBar" title="拖动缩放" style="cursor: url(http://api.map.baidu.com/images/openhand.cur) 8 8, default; top: 29px;"><div class="BMap_smcbg"></div></div></div><div class="BMap_zlHolder"><div class="BMap_zlSt"><div class="BMap_smcbg"></div></div><div class="BMap_zlCity"><div class="BMap_smcbg"></div></div><div class="BMap_zlProv"><div class="BMap_smcbg"></div></div><div class="BMap_zlCountry"><div class="BMap_smcbg"></div></div></div></div></div><div unselectable="on" class=" BMap_scaleCtrl BMap_noprint anchorBL" style="bottom: 18px; right: auto; top: auto; left: 81px; width: 69px; position: absolute; z-index: 10;"><div class="BMap_scaleTxt" unselectable="on">1 公里</div><div class="BMap_scaleBar BMap_scaleHBar"><img style="border:none" src="http://api.map.baidu.com/images/mapctrls11.png"></div><div class="BMap_scaleBar BMap_scaleLBar"><img style="border:none" src="http://api.map.baidu.com/images/mapctrls11.png"></div><div class="BMap_scaleBar BMap_scaleRBar"><img style="border:none" src="http://api.map.baidu.com/images/mapctrls11.png"></div></div></div></td>
							</tr>
								

							</tbody>
						</table>
					
					
					
					
					
					
					

           <!-- ***************** -->
				</form>
		<!-- 需要提交的表单   end -->
		
		   <!--   上传图片   start-->
		     <table width="100%" border="0" cellpadding="3" cellspacing="1">
						<tr>
							<td class="left_title_1" width="20%"><span class="text-error">* </span>商铺图片：</td >
							<td class="left_title_4" width="80%">
							<div>
								<ul>
								<li class="list-item">
								<div class="kevin-photo">
									<a href="javascript:;">
										<span id="s1"></span>
									</a>
								</div>
								<form class="upload" action="/poobo/admin/fileUpload.jspx" method="POST" enctype="multipart/form-data" style="width:130px;">
    								<input type="hidden" name="number" value="1" />
    								<input type="hidden" name="path" value="store" />
    								<input type="hidden" name="isNull" value="<s:property value='picPath'/>"/>
    								<input id="1" type="file" name="imgFile">
    								<button>Upload</button>
   									<div>上传图片</div>
								</form>
								</li>
								</ul>
							</div>
							<span id="msg1"></span>
							</td>
						</tr>
						<tr><td class="left_title_3"></td><td class="left_title_4"><basefont size="2" color="#e56600">图片大小应小于500k,如果图片大于500k,请截图缩减图片大小,建议尺寸：400*250!!</td></tr>
					
						
						
					</table> 
					
					  <!--   上传图片   end-->
		
				<div style="padding-left:45%;">
					<input type="button" class="selectBtn80" value="提交" id="submitBtn" />
				</div>
			</div>
		</div>
	</div>
	
	
	<script type="text/javascript" >
	           var mapLng;   
			   var mapLat;
	        $(function($){
	        
	             mapLng= $("#mapLng").val();
	             mapLat= $("#mapLat").val();
	            if(""==mapLng||""==mapLat){
	               var myCity = new BMap.LocalCity();
					myCity.get(myFun);
									            
				 }else{
				    drawMap(mapLng,mapLat,16);
				 }
	        
	        });
	            
	         
				
			var city = new BMap.LocalSearch(map,{renderOptions:{map:map,autoViewport:true}});    /*地图显示到查询结果处*/
			function searchKeyMap(){  
						 var s = $("#txtSearch").val(); 
						 if(s==""||s==null)
						 {
							 alert("请输入搜索地区!");
							 return false;
						 }else{
						 	city.search(s);  
						 }   
				}
				
			 function myFun(result){
						mapLng=result.center.lng;
						mapLat=result.center.lat;
						drawMap(mapLng,mapLat,12);
			}
	            
	          function drawMap(mapLng,mapLat,level){
	            var map = new BMap.Map("map_canvas");          /* 创建地图实例   */
				var point = new BMap.Point(mapLng,mapLat);  /* 创建点坐标   */
				map.centerAndZoom(point, level);                /* 初始化地图，设置中心点坐标和地图级别   */
				map.addControl(new BMap.NavigationControl());  /*添加鱼骨控件*/
				map.addControl(new BMap.ScaleControl());/*比例尺*/
				map.enableScrollWheelZoom();  /*  开启鼠标滚轮缩放   */
				map.enableKeyboard();         /*  开启键盘控制   */
				map.enableContinuousZoom();   /*  开启连续缩放效果   */
				map.enableInertialDragging(); /*  开启惯性拖拽效果 */
				
				var marker1 = new BMap.Marker(point);         /* 创建标注*/
				map.addOverlay(marker1);                           /* 将标注添加到地图中*/
				marker1.enableDragging(true);    /* 设置标注可拖拽*/
				 marker1.addEventListener("dragend", function(){
					var center=marker1.getPoint();
					 $("#mapLng").val(center.lng);
					 $("#mapLat").val(center.lat); 
				 });
				
				 map.addEventListener("click", function (e) {  
					 map.clearOverlays();
					 point = new BMap.Point(e.point.lng, e.point.lat);  
					 $("#mapLng").val(e.point.lng);
					 $("#mapLat").val(e.point.lat);
					 var marker = new BMap.Marker(point); 
					 map.addOverlay(marker);   
					 marker.enableDragging(true);    /* 设置标注可拖拽*/
					 marker.addEventListener("dragend", function(){
						var center=marker.getPoint();
						 $("#mapLng").val(center.lng);
						 $("#mapLat").val(center.lat); 
					 });  
				});
	           
	           }
				
		  		</script> 

	
	
</body>
</html>

3、js

//提交表单
function ajaxSubmitForm(){
	$.ajax({
		type : "POST",
		url : "poobo/store/saveStore.jspx",
		data : $("#submitForm").serialize(),
		dataType : "json",
		success : function(data) {
			if (data.flag) {
				// 成功
				showSuccessMsg(data.msg, 2);// 提示成功，2秒钟关闭
				//加载列表页面
				$(".container").load("poobo/store/toStoreList.jspx");
			}else{
				//失败
				showFailureMsg(data.msg, 1);// 提示成功，2秒钟关闭
			}
		}
	});

}

$(function($) {//页面加载完成事件

//验证表单//
	
	 $("#submitForm").validate({
		rules : {
			"store.storeName":{//登录名
			required : true,
			minlength:2,
			maxlength:40,
			isName:true
			},
			"store.phone":{//电话
				required : true,
				isMobile:true
				}
			,"store.mainDate":{//营业时间
				required : true,
				minlength:2,
				maxlength:200
				}
			,"store.storeSampleInfo":{//简介
				required : true,
				minlength:2,
				maxlength:1000
			}
			,"store.address":{//地址
				required : true,
				minlength:2,
				maxlength:100
			}
			,"store.storeAccount.limitMoney":{//额度
				isMoney:true
			}
		},
		
		//验证结果
		messages : {
			"store.storeName":{
				required : "请填写用户名",
				 minlength:"用户名不能少于2个字符",
				 maxlength:"用户名不能超过40个字符",
				 isName : "用户名必须为数字、字母、下划线及其组合"
			},
			"store.phone":{//电话
				required : "请填写电话",
				isMobile:"手机号格式错误"
			},"store.mainDate":{//营业时间
				required : "营业时间必填",
				minlength:"至少2个字符",
				maxlength:"最多200个字符"
				}
			,"store.storeSampleInfo":{//简介
				required : "简介必填",
				minlength:"至少2个字符",
				maxlength:"最多1000个字符"
			}
			,"store.address":{//地址
				required : "地址必填",
				minlength:"至少2个字符",
				maxlength:"最多100个字符"
			}
			,"store.storeAccount.limitMoney":{//额度
				isMoney:"必须为整数"
			}
		} ,
		submitHandler : function(form) {
			ajaxSubmitForm();
			
		},
		
		success : function(label) {
		label.addClass("success").text("输入正确");
		},
		errorPlacement : function(error, element) {
		error.appendTo(element.next("span").next("span"));
		},
		onkeyup : false
		
		});
	
///
	 
提交按钮///
$("#submitBtn").click(function(){
	
	$("#submitForm").submit();
	
});
	
///
	
	/*商铺图片上传初始化*/
	$('.upload').fileUploadUI({
        buildDownloadRow: function (file) {
        	/*记录上传的图片的集合*/
        	var fileUploadPic=$("#fileUploadPic").val();
        	
        	if(fileUploadPic==""){
        		//fileUploadPic=file.name+",";
        		fileUploadPic=file.name;
        		$("#fileUploadPic").val(fileUploadPic);
        	}else{
        		//fileUploadPic=file.name+",";
        		fileUploadPic=file.name;
        		$("#fileUploadPic").val(fileUploadPic);
        	}
         	var id="#s"+file.number;
         	var imgId="#img"+file.number;
        	if(file.status=="0" &&  file.number == 1){
        		$(id).html("<img src='/img/store/original_copy/"+file.name+"' style=\"width:110px;height:110px;\"\/>");
        		$(imgId).val(file.name);
        	}
        	else{
        		alert(file.message);
        		$(id).html("");
        		$(imgId).val("");
        	}
        },
        
        beforeSend: function (event, files, index, xhr, handler, callBack) {
        	var file=files[index];
        	var regexp = /\.(png)|(jpg)|(gif)|(jpeg)$/i;
        	var id="#s"+$(this.uploadForm.prevObject).attr("id");
        	if(!regexp.test(file.name)){
        		alert("请选择一个图片文件");
        		return;
        	}
        	if(file.fileSize>=512000 || file.size > 512000) {
            	alert("图片请不要超过500k");
            	return;
        	}
        	$(id).html("<img id='image1' src='/css/jquery/loading.gif' \/>");
        	callBack();
        },
        
        onError: function (event, files, index, xhr, handler) {
        	var id="#s"+$(this.uploadForm.prevObject).attr("id");
        	var imgId="#img"+$(this.uploadForm.prevObject).attr("id");
        	if (handler.originalEvent) {
        		$(id).html("");
        		$(imgId).val("");
            	alert("图片请不要超过500k");
    		}else{
        		$(id).html("");
        		$(imgId).val("");
            	alert("抱歉，服务器不能响应您的请求，请稍后再试");
    		}
		}
        
        
    });
	
	/*商品图片设置*/
	setPics();

	
});


//
function setPics(){//2015.03.31加载原先的头像
    var path=$("#img1").val();
    var picPath = "/img/store/original_copy/"+path+"?temp="+Math.random();  
	var id="#s1";
	if(path == null || path == ''){		
		$(id).html("<img src='/poobo/img/default_pic.jpg' style=\"width:110px;height:110px;\"\/>");
		$("#img1").val("default_pic.jpg");
	    return ;
	 }
	
    $(id).html("<img src='"+picPath+"' style=\"width:110px;height:110px;\"\/>");
    $("#originalPic").val(path);
}
//

4、自定义校验方法

 jQuery.validator.addMethod("isMobile", function(value, element) {       
		     var length = value.length;   
		     var mobile = /^(1+(3|4|5|7|8|9)+\d{9})$/;   
		     return this.optional(element) || (length == 11 && mobile.test(value));       
		 }, "请正确填写您的手机号码");      

   jQuery.validator.addMethod("isName", function(value, element) { 
		     var name = /^[\u0391-\uFFE5\w]{2,30}$/;   
		     return this.optional(element) || (name.test(value));       
		 }, "请正确填写名称");      
   jQuery.validator.addMethod("isMoney", function(value, element) { 
		     var reg = /^[0-9]+([.]{1}[0-9]{1,2})?$/;   
		     return this.optional(element) || (reg.test(value));       
		 }, "请正确填写金额");   
		 
	 jQuery.validator.addMethod("notZero", function(value, element) { 
		     var flag=false; 
		       if(value>0){
		       flag=true;
		       }
		     return this.optional(element) || (flag);       
		 }, "填写值必须大于零");


zziamalei
关注
专栏目录
jQuery Validate自定义校验
u012890715的专栏
10-15 4051
jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。 该插件是由 Jörn Zaeffere
jquery.validate校验问题--组合条件唯一校验
chunrudikai的博客
01-17 7611
问题描述 校验需求：*为必填项，同时3个必填项还要做唯一校验，即3个必填项唯一确定一条记录 待校验表单如下图， 对于以上问题，需要3个必填项校验通过，然后再做唯一校验，之前我在黑名单类型字段做唯一校验 校验规则 var black_form = $("#black_form").validate({ rules: { 'hpzl':{required: true}, //
JQuery validate 验证一个单独的表单元素实例
12-10
前提：已引入JQuery validate插件 function validateOneElement() { //验证id="form1"的表单中id="elementId"的表单元素 $("#form1").validate().element($("#elementId")) } 以上这篇JQuery validate 验证一个单独的表单元素实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
jquery validate 验证单个
恨_别离的博客
07-04 3742
首先引入js：jquery.validate.min.js、messages_zh.js if(!$("#form").validate().element($("#memo"))){ parent.showToast("error","描述字数最多250个"); return; }
jquery.validate验证单个表单元素的方法
梦幻般的菜鸟的博客
10-14 2723
$(".form-horizontal").validate().element($("#"+_thisId)); $(".form-horizontal").validate().form($("#"+_thisId));
Jquery Validate根据其他元素的事件来触发单个元素的异步校验
weixin_30471065的博客
03-14 154
场景：在做一个车辆信息管理模块，而车牌是通过车牌颜色和车牌号码来确定唯一性的，录入车牌信息时需对车牌进行唯一性校验。 对车牌号的异步校验规则 1 rules:{ 2 plateNumber:{ 3 remote:{ 4 url:'${ctx}/bu/vehicleInfo/ch...
jquery validate单独校验某一字段
qq_36134977的博客
10-23 9679
前提：下载插件jquery.validate.min.js"> 1、html代码： f_tabsFour" class="nav nav-tabs hide_query">        #tab-5-1">查询信息        SQL脚本 2、在中编写校验规则 //查询定义校验         function validQueryForm(){          
详解jquery validate实现表单验证 （正则表达式）
10-20
jQuery Validate还提供了一些对象和静态方法，如`validator.form()`用来验证整个表单的有效性，`validator.element(element)`验证单个表单元素，`validator.resetForm()`恢复表单初始状态，`validator.showErrors...
DRF--validators检验函数,单字段校验,多字段联合校验
qq_40132294的博客
07-10 2895
1.validators校验函数 a).可以在序列化器字段上使用validators函数指定自定义的校验规则 b).validators值必须为序列类型(类表),在列表中可以添加多个校验规则 c).DRF框架自带的UniqueValidator校验器,必须指定queryset参数指定查询集对象,用于对该字段的唯一性进行校验,UniqueValidator里面还可以使用message指定自定义报错信息 在序列化器需要反序列化输入校验的字段中,指定vali
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
vm021的博客
04-08 1304
title 1.目前贵公司服务器规模有多少？ 2.贵公司IT架构对云计算的使用现状是？ A. 完全传统IT架构 B. 已经使用虚拟化 C. 已经开始云的使用 3.如果贵公司当前已经使用虚拟化部署，正在使用的虚拟机的数量是多少台？ A．0~200台 B. 20
JSValid:一种在 JavaScript 中进行验证的函数式方法
07-24
JSValid JSValid 是一种在 JavaScript 中进行验证的函数式方法。 它提供了一种表达值约束的自然方式，以及一种执行它们的简单机制。 JSValid 指定一种特殊函数的签名，称为验证器。 验证器接受要验证的值subject作为单个参数，并返回报告。 报告是一个具有violations属性的对象，它是一组违规。 空的违规数组表示有效的主题。 验证器可以使用其他属性来扩充其报告。 违规是具有以下属性的对象，其中只有message是必需的： message ：描述违规的字符串。 path ：描述违规发生位置的键数组（例如， ["people", 0] ）。 code ：唯一标识违规类型的字符串。 a : 图表 A。 b : 图表 B。 工厂是任何返回验证器函数的函数。 这是一个演示，展示了工厂、验证器和报告如何协同工作。 // A validator
validation校验开发实战
方猿
06-28 830
1、NotNull 和 @NotEmpty 和@NotBlank 区别 如果在使用注解 @Validator的时候，出现如下错误： javax.validation.UnexpectedTypeException: No validator could be found for type: java.lang.Integer 那一定是在基本类型上使用注解出现的错误，需要注意的是: @NotEmpty 用在集合类上面,验证注解的元素值不为null且不为空（字符串长度不为0、集合大小不为0） @NotBlan
Validator自定义校验
a546835886的博客
06-20 1743
一.导入maven依赖 <dependency> <groupId>javax.validation</groupId> <artifactId>validation-api</artifactId> <version>1.1.0.Final</versio...
@Validated参数检验
weixin_47049334的博客
10-17 1964
@Validated参数检验
Jquery validate验证表单只验证第一个input元素
LiLiYuan.的博客
08-27 671
jQuery Validate 使用方式在这篇文章 jQuery Validate 使用jquery.validate插件对表单进行验证时，当name属性相同，或者没有设置name属性时，则validate只校验第一个name的控件，其余input元素则不校验。 当节点的name相同时候，脚本特意忽略剩余节点，导致所有相关节点的errMsg都显示在第一个相关节点上。 因此，写前端页面时，一定要添加name属性，我自己第一次使用.validate时 是用bootstrap框架的代码来写的前端，没有添加
JQuery validate 验证一个单独的表单元素
Hason的专栏
07-21 9289
前提：已引入JQuery validate插件 function validateOneElement() { //验证id="form1"的表单中id="elementId"的表单元素 $("#form1").validate().element($("#elementId")) }
jQuery.validate 表单校验
m0_57537410的博客
09-07 1222
jQuery表单验证
JQuery表单验证(validate):常用例子介绍
最新发布
apple_51426592的博客
11-09 639
不过，这样感觉不好，因为验证规则侵入了我们的html代码。jquery.validate.js是jquery旗下的一个验证插件，借助jquery的优势，我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法。这样，当form被提交的时候，就会根据input指定的class来进行验证了。如果失败，form的提交就会被阻止。可以通过event指定触发效验方式（可选值有keyup(每次按键时)，blur(当控件失去焦点时)，不指定时就只在按提交按钮时触发）那么，接下的问题，就是显示的错误提示是默认的。
jQuery Validate 介绍
weixin_30672295的博客
10-16 470
jQueryValidate jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。 该插件是由 Jörn Zaeffe...
jQuery validate插件详解：实战表单校验与定制规则
本文将深入探讨jQuery中如何利用validate插件来增强表单验证功能，使用户提交数据时确保输入的有效性。validate插件是jQuery中一个强大的工具，能够轻松地实现客户端表单验证，提升用户体验并减少服务器端的负担。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值