jquery validation表單驗證，自定義字段驗證

原創 Yanch_ 2018-09-03 09:48

首先導入三個js支持

		<script src='/resources/assets/js/jquery.js'></script>
<!-- jquery validation -->
		<script type="text/javascript" src="/resources/js/jquery.validate.min.js"></script>
	
<!-- 中文支持 -->
<script type="text/javascript" src="/resources/js/messages_zh.min.js"></script>







js代碼





<script type="text/javascript">
			/* 驗證通過之後回調方法 */
			$.validator.setDefaults({
			    submitHandler: function() {
			    	alert("添加成功！");
			      	/* 提交表單的方法 */
			      	MAR.ajaxSubmitForm('/market/souMarket',$('#submitForm').serialize(),'POST','/market/marketIndex')
			    }
			});
			$(function(){
				/* 自定義手機號碼驗證  */
				$.validator.addMethod("isMobile", function(value, element) {  
				    var length = value.length;  
				    var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;  
				    return this.optional(element) || (length == 11 && mobile.test(value));  
				}, "*請正確填寫您的手機號碼"); 
				/* 點擊a標籤提交表單 ，觸發驗證，可以換成按鈕觸發，或者表單的submit按鈕*/
				$('#btn-submit').click(function(){
					$('#submitForm').submit();
					
				});
				/* 提交後驗證提交表單 */
				$('#submitForm').validate({
					onsubmit: true,//提交表單時驗證
					onfocusout:false,// 是否在失去焦點時驗證
　					onkeyup :false,// 是否在敲擊鍵盤時驗證
					/* 驗證規則 */
					rules:{
						marketName:"required",
						marketType:"required",
						address:"required",  
						zipcode:"required",     
						principal:"required",  
						linkMan:"required",  
						phone : {  
				            required : true,  
				            minlength : 11,  
				            isMobile : true  
				        },  
						email:{
							email:true,
						},    
					
					},
					messages: {
						marketName:'*請輸入市場名稱',
						marketType:"*請輸入市場類型",
						address:"*請輸入地址",  
						zipcode:"*請輸入郵編",     
						principal:"*請輸入負責人",  
						linkMan:"*請輸入聯繫人",  
						phone :"*請正確填寫您的手機號碼",
						email:"*請輸入有效的電子郵件地址",
					},
				});
				
				
			
			});
			
		
		</script>
樣式（將錯誤提示更改爲紅色）





		<style>
			.error{
				color:red;
			}
		</style>
表單
									<form id="submitForm" class="form-horizontal">
										<input type="hidden" name="id" id="id" value="<#if entity??>${entity.id?c!''}</#if>"/>
										<div class="form-group">
											<label style="text-align: right;" class="control-label col-sm-4 col-xs-6 no-padding-right">
												<span class="red">*</span>市場名稱
											</label>
											<div class=" col-sm-8 col-xs-6">
												<div class="clearfix">
													<input class="col-sm-4 col-xs-8" type="text" name="marketName" id="marketName" value="<#if entity??>${entity.marketName!''}</#if>" placeholder="市場名稱"/>
												</div>
											</div>
										</div>
										<div class="space-2"></div>
										<div class="form-group">
											<label style="text-align: right;" class="control-label col-sm-4  col-xs-6 no-padding-right">
												<span class="red">*</span>市場類型
											</label>
											<div class="col-sm-8 col-xs-6">
												<div class="clearfix">
													<input class="col-sm-4 col-xs-8" type="text" name="marketType" id="marketType" value="<#if entity??>${entity.marketType!''}</#if>" placeholder="市場類型"/>
												</div>
											</div>
										</div>
										<div class="space-2"></div>
										<div class="form-group">
											<label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" >
												<span class="red">*</span>地址
											</label>
											<div class="col-sm-8  col-xs-6">
												<div class="clearfix">
													<input class="col-sm-4 col-xs-8" type="text" name="address" id="address" value="<#if entity??>${entity.address!''}</#if>" placeholder="地址"/> 
												</div>
											</div>
										</div>
										<div class="space-2"></div>
										<div class="form-group">
											<label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" >
												<span class="red">*</span>郵編
											</label>
											<div class="col-sm-8  col-xs-6">
												<div class="clearfix">
													<input class="col-sm-4 col-xs-8" type="text" name="zipcode" id="zipcode" value="<#if entity??>${entity.zipcode!''}</#if>" placeholder="郵編"/>
												</div>
											</div>
										</div>
										<div class="space-2"></div>
										<div class="form-group">
											<label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" >
												<span class="red">*</span>營業面積
											</label>
											<div class="col-sm-8  col-xs-6">
												<div class="clearfix">
													<input class="col-sm-4 col-xs-8" type="text" name="businessArea" id="businessArea" value="<#if entity??>${entity.businessArea!''}</#if>" placeholder="營業面積"/>
												</div>
											</div>
										</div>
										<div class="space-2"></div>
										<div class="form-group">
											<label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" >
												<span class="red">*</span>佔地面積
											</label>
											<div class="col-sm-8  col-xs-6">
												<div class="clearfix">
													<input class="col-sm-4 col-xs-8" type="text" name="zhandiArea" id="zhandiArea" value="<#if entity??>${entity.businessArea!''}</#if>" placeholder="佔地面積"/>
												</div>
											</div>
										</div>
										<div class="space-2"></div>
										<div class="form-group">
											<label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" >
												<span class="red">*</span>負責人
											</label>
											<div class="col-sm-8  col-xs-6">
												<div class="clearfix">
													<input class="col-sm-4 col-xs-8" type="text" name="principal" id="principal" value="<#if entity??>${entity.principal!''}</#if>" placeholder="負責人"/>
												</div>
											</div>
										</div>
										<div class="space-2"></div>
										<div class="form-group">
											<label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" >
												<span class="red">*</span>聯繫人
											</label>
											<div class="col-sm-8  col-xs-6">
												<div class="clearfix">
													<input class="col-sm-4 col-xs-8" type="text" name="linkMan" id="linkMan" value="<#if entity??>${entity.linkMan!''}</#if>" placeholder="聯繫人"/>
												</div>
											</div>
										</div>
										<div class="space-2"></div>
										<div class="form-group">
											<label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right">
												<span class="red">*</span>聯繫電話
											</label>
											<div class="col-sm-8  col-xs-6">
												<div class="clearfix">
													<input class="col-sm-4 col-xs-8" type="text" name="phone" id="phone" value="<#if entity??>${entity.phone!''}</#if>" placeholder="聯繫電話"/> 
												</div>
											</div>
										</div>
										<div class="space-2"></div>
										<div class="form-group">
											<label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" >
												<span class="red">*</span>郵箱
											</label>
											<div class="col-sm-8  col-xs-6">
												<div class="clearfix">
													<input class="col-sm-4 col-xs-8" type="text" name="email" id="email" value="<#if entity??>${entity.email!''}</#if>" placeholder="郵箱"/> 
												</div>
											</div>
										</div>
										<div class="space-2"></div>
										<div class="form-group">
											<label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" >
												<span class="red">*</span>所在地類型
											</label>
											<div class="col-sm-8  col-xs-6">
												<div class="clearfix">
													<input class="col-sm-4 col-xs-8" type="text" name="locationType" id="locationType" value="<#if entity??>${entity.locationType!''}</#if>" placeholder="所在地類型"/>
												</div>
											</div>
										</div>
										<div class="space-2"></div>
										<div class="form-group">
											<label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right">
												<span class="red">*</span>備註
											</label>
											<div class="col-sm-8  col-xs-6">
												<div class="clearfix">
												   <textarea class="col-sm-4 col-xs-8" id="form-field-8"  class="col-sm-4  col-xs-6" name="remark" id="remark"  placeholder="備註"><#if entity??>${entity.remark!''}</#if></textarea>
												</div>
											</div>
										</div>
										<div class="clearfix form-actions">
											<div class="col-md-offset-4 col-md-9">
												<a href="/market/marketIndex" class="btn">
													<i class="ace-icon fa fa-undo bigger-110"></i>
													返回
												</a>
												     
												<!-- <a href="javascript:MAR.ajaxSubmitForm('/market/souMarket',$('#submitForm').serialize(),'POST','/market/marketIndex')" class="btn btn-info">
													<i class="ace-icon fa fa-check bigger-110"></i> -->
												<a href="javascript:void(0)" class="btn btn-info" id="btn-submit">
													<i class="ace-icon fa fa-check bigger-110"></i>
													提交
												</a>
											</div>
										</div>
									</form>





























    





發表評論














所有評論



還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.







相關文章








Element-ui






Element-ui一、什麼是Element-ui
一、什麼是Element-ui
element 是基於 vue 實現的一套不依賴業務的 UI 組件庫，提供了豐富的PC端組件，減少用戶對常用組件的封裝，降低了開發的難易程度






 狂风

2020-07-08 11:49:25









動態添加tab選項卡及tab頁面內容（ajax請求json數據）






作者：mandy
1.實現效果
2.html部分：
<div id="ifrContentId"></div>
3.js部分
$(document).ready(function () {






 Insightzen_xian

2020-07-07 22:21:01









element-ui組件擴展--自定義分頁組件






作者:mandy
element-ui組件擴展–自定義分頁組件
*想要封裝好一個組件，必須要熟練掌握這三個知識點：
1.父組件傳值到子組件（props）
2.子組件傳值到父組件（emit）3.插槽使用（slot）。對於一個獨立的組






 Insightzen_xian

2020-07-07 22:21:01









15個jQuery代碼片段






摘要：開發人員利用jQuery代碼不僅能給網站帶來各種動畫、特效，還會提高網站的用戶體驗。本文總結了開發者經常使用的15個jQuery代碼片段，大家可以直接拿來用。
jQuery裏提供了許多創建交互式網站的方法，在開發Web項






 风继续吹DV

2020-07-07 21:19:19









前端技術（素材）






前端技術
        前端開發是創建Web頁面或app等前端界面呈現給用戶的過程，通過HTML，CSS及JavaScript以及衍生出來的各種技術、框架、解決方案，來實現互聯網產品的用戶界面交互。
以下是有關前端技術的參考資料






 繁华落幕@Dummer

2020-07-07 14:51:56









VUE問題：You are using the runtime-only build of Vue where the template compiler is not available.






轉載至 https://segmentfault.com/a/1190000006435886
Troubleshooting of upgrading Vue from 1.0 to 2.0
系列文章:
Vue 2.0 升（cai）






 待鸣

2020-07-07 03:58:56









html 導出 word 調整頁邊距






經分析源碼，添加如下CSS代碼即可：
@page WordSection1
{size:595.3pt 841.9pt;
margin:30.0pt 30.0pt 30.0pt 30.0pt;
mso-header-margin:






 待鸣

2020-07-07 03:58:44









[功能實現思路]html 郵件報 在 outlook 中錨點失效






功能需求：
有客戶提出我們發出的郵件報在 outlook裏錨點失效
解決方案：
//html標籤
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-mi






 待鸣

2020-07-07 03:58:44









如何使用uni-app快速成型一個微信小程序（一）






前言
在很多年前，微信小程序還在內測的時候，就嘗試寫過幾個小程序，但是那個時候也是因爲剛開始做開發，後端語言還沒整明白，並且感覺小程序應該不會火，加上小程序是用它自己的一套語法，所以對我個人而言學習成本較高，遂沒有繼續研究下去。






 待鸣

2020-07-07 03:58:44









如何使用uni-app快速成型一個微信小程序（二）






正式編碼
我們在第一篇文章中已經實現了編碼環境的搭建，本章將從實際代碼中出發，構造一個查詢的小程序
產品目標
我們做一個產品之前，我們要明晰產品的功能和定位，現在要做的產品是一個國家獸藥限量數據查詢，定位於快速開箱即用，所以我們要






 待鸣

2020-07-07 03:58:44









升級npm和node






轉載：npm升級 node升級
鏈接：https://blog.csdn.net/qq_16339527/article/details/73008708
轉載：Node.js npm被牆、下載慢的問題 淘寶npm源
鏈接：ht






 Wayss_S

2020-07-06 14:38:27









jquery中class選擇器的用法






jquery選擇器中兩個class的用法
$(".class1 .class2") 選擇class1元素下class2的元素（中間有空格）
$(".class1.class2") 選擇同時含有class1和class2的元素（中間沒有空格






 2020037303

2020-07-06 06:44:22









關於Jquery2






Jquery
事件綁定
文檔加載之後執行
Js
window.onload = function(){
頁面加載之後執行的內容
}
Jquery
$(document).ready(function(){
頁面加載






 JiangLi_

2020-07-04 10:05:13









關於Ajax異步請求






AJAX
AJAX引言
​ a)概念: ansychronous(異步) javascript(js) and xml(全稱,異步javaScript and XML)
​ b)傳統請求
​ i






 JiangLi_

2020-07-04 10:05:03









關於Jquery1






Jquery1
回顧 js_day2
阻止默認提交行爲 表單 οnsubmit=“return false” 超鏈 javascript:void(0)
事件對象event 獲取事件源target 橫縱座標client






 JiangLi_

2020-07-04 10:05:03