常用的正則表示式及jQuery.validator運用正則驗證
阿新 • • 發佈：2019-01-28
1.驗證使用者名稱和密碼：（"^[a-zA-Z]\w{5,15}$"）正確格式："[A-Z][a-z]_[0-9]"組成,並且第一個字必須為字母6~16位； 2.驗證電話號碼：（"^(\d{3.4}-)\d{7,8}$"）正確格式：xxx/xxxx-xxxxxxx/xxxxxxxx；
3.驗證身份證號（15位或18位數字）：（"^\d{15}|\d{18}$"）；
4.驗證Email地址：("^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$")；
5.只能輸入由數字和26個英文字母組成的字串：("^[A-Za-z0-9]+$") ;
6.整數或者小數：^[0-9]+\.{0,1}[0-9]{0,2}$
7.只能輸入數字："^[0-9]*$"。
8.只能輸入n位的數字："^\d{n}$"。
9.只能輸入至少n位的數字："^\d{n,}$"。
10.只能輸入m~n位的數字：。"^\d{m,n}$"
11.只能輸入零和非零開頭的數字："^(0|[1-9][0-9]*)$"。
12.只能輸入有兩位小數的正實數："^[0-9]+(.[0-9]{2})?$"。
13.只能輸入有1~3位小數的正實數："^[0-9]+(.[0-9]{1,3})?$"。
14.只能輸入非零的正整數："^\+?[1-9][0-9]*$"。
15.只能輸入非零的負整數："^\-[1-9][]0-9"*$。
16.只能輸入長度為3的字元："^.{3}$"。
17.只能輸入由26個英文字母組成的字串："^[A-Za-z]+$"。
18.只能輸入由26個大寫英文字母組成的字串："^[A-Z]+$"。
19.只能輸入由26個小寫英文字母組成的字串："^[a-z]+$"。
20.驗證是否含有^%&',;=?$\"等字元："[^%&',;=?$\x22]+"。
21.只能輸入漢字："^[\u4e00-\u9fa5]{0,}$"
22.驗證URL："^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$"。
23.驗證一年的12個月："^(0?[1-9]|1[0-2])$"正確格式為："01"～"09"和"1"～"12"。
24.驗證一個月的31天："^((0?[1-9])|((1|2)[0-9])|30|31)$"正確格式為；"01"～"09"和"1"～"31"。
jQuery.validator運用自定義正則驗證例項：
//年份
jQuery.validator.addMethod("isOnlyNumber", function(value, element) {
var tel = /^[1|2][0-9]{3}$/;
return this.optional(element) || (tel.test(value));
}, "請輸入正確的年份");
//中文英文數字組合
jQuery.validator.addMethod("isGroup", function(value, element) {
var tel = /^[\u4E00-\u9FA5A-Za-z0-9]+$/;
return this.optional(element) || (tel.test(value));
}, "此欄位只允許中文英文數字組合");
//中文英文數字組合
jQuery.validator.addMethod("isGroupPart1", function(value, element) {
var tel = /^[\u4E00-\u9FA5A-Za-z0-9（）（）]+$/;
return this.optional(element) || (tel.test(value));
}, "此欄位只允許中文英文數字部分中文符號（）（）組合");
//中文英文數字部分中文符號組合
jQuery.validator.addMethod("isGroupPart", function(value, element) {
var tel = /^[\u4E00-\u9FA5A-Za-z0-9。，、]+$/;
return this.optional(element) || (tel.test(value));
}, "此欄位只允許中文英文數字部分中文符號。，、組合");
//英文數字組合(密碼)
jQuery.validator.addMethod("isPassword", function(value, element) {
var tel = /^[A-Za-z0-9]+$/;
return this.optional(element) || (tel.test(value));
}, "此欄位只允許英文數字組合");
//英文數字組合(賬號)
jQuery.validator.addMethod("isAccount", function(value, element) {
var tel = /^[A-Za-z0-9]+$/;
return this.optional(element) || (tel.test(value));
}, "此欄位只允許英文數字組合");
//車牌號
jQuery.validator.addMethod("isPlateNumber", function(value, element) {
var tel=/^[\u4e00-\u9fa5]{1}[A-Z]{1}[A-Z_0-9]{5,6}$/;
return this.optional(element) || (tel.test(value));
}, "請輸入正確的車牌號碼");
//中文組合
jQuery.validator.addMethod("isChinese", function(value, element) {
var tel = /^[\u4e00-\u9fa5]{0,}$/;
return this.optional(element) || (tel.test(value));
}, "此欄位只允許為中文");
//中文或英文
jQuery.validator.addMethod("isChineseAndEnglish", function(value, element) {
var tel =/^[\u4E00-\u9FA5A-Za-z]+$/;
return this.optional(element) || (tel.test(value));
}, "此欄位只允許中文或英文");
//電話號碼
jQuery.validator.addMethod("phone", function(value, element) {
var tel =/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
return this.optional(element) || (tel.test(value));
}, "請輸入有效的手機號碼或座機號碼");
//手機號碼
jQuery.validator.addMethod("cellPhone", function(value, element) {
var tel =/1[3|5|7|8|][0-9]{9}$/;
return this.optional(element) || (tel.test(value));
}, "請輸入有效的手機號碼");
//身份證號碼
jQuery.validator.addMethod("IDCard", function(value, element) {
var tel =/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
return this.optional(element) || (tel.test(value));
}, "請輸入有效的身份證號碼");
//經度
jQuery.validator.addMethod("longitudeCheck", function(value, element) {
var tel =/^-?(?:(?:180(?:\.0{1,10})?)|(?:(?:(?:1[0-7]\d)|(?:[1-9]?\d))(?:\.\d{1,10})?))$/;
return this.optional(element) || (tel.test(value));
}, "請輸入有效的百度地圖經度格式，如：104.0722270000");
//緯度
jQuery.validator.addMethod("latitudeCheck", function(value, element) {
var tel =/^-?(?:90(?:\.0{1,10})?|(?:[1-8]?\d(?:\.\d{1,10})?))$/;
return this.optional(element) || (tel.test(value));
}, "請輸入有效的百度地圖緯度格式，如：30.6634560000");
例項：
jsp:
<form id="stationBaseInfoSet" name="stationBaseInfoSet" rel="stationBaseInfoSetInput" method="post">
<table class="input">
<s:hidden key="stationBaseInfoSetBean.serviceStationId" />
<s:hidden key="stationBaseInfoSetBean.userId" />
<s:hidden key="stationBaseInfoSetBean.version" />
<s:hidden key="readOnly"/>
<input type="hidden" id="status" value="<%=EnterpriseStatus.PASS.getValue()%>"/>
<tr>
<th>公司名稱</th>
<td colspan="3">
<s:textfield key="stationBaseInfoSetBean.enterpriseName" cssClass="inputtext w-100p required isGroupPart1" maxlength="60" disabled="%{readOnly}"/>
</td>
</tr>
<tr>
<th>公司地址</th>
<td colspan="3">
<s:select key="area" list="areas" listKey="areaId" listValue="areaName" disabled="%{readOnly}" />
<s:hidden key="stationBaseInfoSetBean.areaId" />
<s:hidden key="stationBaseInfoSetBean.areaName" />
地域
<s:select key="province" list="provinces" listKey="provinceId" listValue="provinceName" disabled="%{readOnly}" />
<s:hidden key="stationBaseInfoSetBean.provinceId" />
<s:hidden key="stationBaseInfoSetBean.provinceName" />
省
<s:select key="city" list="citys" listKey="cityId" listValue="cityName" disabled="%{readOnly}"/>
<s:hidden key="stationBaseInfoSetBean.cityId" />
<s:hidden key="stationBaseInfoSetBean.cityName" />
市
<s:select key="district" list="citys" listKey="districtId" listValue="districtName" cssClass="required" disabled="%{readOnly}" />
<s:hidden key="stationBaseInfoSetBean.districtId" />
<s:hidden key="stationBaseInfoSetBean.districtName" />
區 <input name="btnAddNewCityOrDistrict" id="btnAddNewCityOrDistrict" type="button" class="button" value="未找到所在地址，點此新增"/>
<br />
<br />
<s:textfield key="stationBaseInfoSetBean.street" placeholder="街道詳細地址" cssClass="inputtext w-100p required" maxlength="60" disabled="%{readOnly}" />
</tr>
<s:set var="PASS"><%=EnterpriseStatus.PASS.getValue()%></s:set>
<s:if test="%{readOnly||stationBaseInfoSetBean.status==#PASS}">
<tr>
<th>經度</th>
<td>
<s:textfield key="stationBaseInfoSetBean.longitude" cssClass="inputtext required longitudeCheck" maxlength="30" disabled="%{!readOnly}" />
</td>
<th>緯度</th>
<td>
<s:textfield key="stationBaseInfoSetBean.latitude" cssClass="inputtext required latitudeCheck" maxlength="30" disabled="%{!readOnly}" />
</td>
</tr>
</s:if>
<tr>
<th>營業執照號</th>
<td>
<s:textfield key="stationBaseInfoSetBean.businessLicense" cssClass="inputtext required digits" maxlength="15" disabled="%{readOnly}" />
</td>
<th>資金性質</th>
<td>
<s:textfield key="stationBaseInfoSetBean.commercialProperties" cssClass="inputtext required isChinese" maxlength="60" disabled="%{readOnly}" />
</td>
</tr>
<tr>
<th>法人代表</th>
<td>
<s:textfield key="stationBaseInfoSetBean.legalRepresentative" cssClass="inputtext required isChineseAndEnglish" maxlength="10" disabled="%{readOnly}" />
</td>
<th>註冊資金</th>
<td>
<s:textfield key="stationBaseInfoSetBean.registeredCapital" cssClass="inputtext required digits" maxlength="19" disabled="%{readOnly}" />
（單位：萬元）
</td>
</tr>
<tr>
<th>經營範圍</th>
<td>
<s:textfield key="stationBaseInfoSetBean.scopeBusiness" cssClass="inputtext required isGroupPart" maxlength="100" disabled="%{readOnly}" />
</td>
<th>所屬行業</th>
<td>
<s:textfield key="stationBaseInfoSetBean.industry" cssClass="inputtext required isGroup" maxlength="50" disabled="%{readOnly}" />
</td>
</tr>
<tr>
<td colspan="4"><hr size="1" class="line" /></td>
</tr>
<tr>
<th>企業郵箱</th>
<td>
<s:textfield key="stationBaseInfoSetBean.enterpriseMailbox" cssClass="inputtext required email" maxlength="30" disabled="%{readOnly}" />
</td>
<th>聯絡電話</th>
<td>
<s:textfield key="stationBaseInfoSetBean.contactNumber" cssClass="inputtext required phone" disabled="%{readOnly}" />
</td>
</tr>
<tr>
<th>經辦人</th>
<td>
<s:textfield key="stationBaseInfoSetBean.operator" cssClass="inputtext required isChineseAndEnglish" maxlength="10" disabled="%{readOnly}" />
</td>
<th>經辦人電話</th>
<td>
<s:textfield key="stationBaseInfoSetBean.operatorContactNumber" cssClass="inputtext required phone" disabled="%{readOnly}" />
</td>
</tr>
<tr>
<th>經辦人郵箱</th>
<td>
<s:textfield key="stationBaseInfoSetBean.operatorMailbox" cssClass="inputtext required email" maxlength="30" disabled="%{readOnly}" />
</td>
<th>備註</th>
<td>
<s:textfield key="stationBaseInfoSetBean.comment" cssClass="inputtext w-100p" maxlength="200" disabled="%{readOnly}" />
</td>
</tr>
<tr>
<th>服務站名稱</th>
<td>
<s:textfield key="stationBaseInfoSetBean.serviceStationName" cssClass="inputtext required isGroupPart1" maxlength="30" disabled="%{readOnly}" />
</td>
<th>可容納托盤數</th>
<td>
<s:textfield key="stationBaseInfoSetBean.depositAmount" cssClass="inputtext digits" data-rule-required="true" maxlength="10" disabled="%{readOnly}" />
</td>
</tr>
<tr>
<td colspan="4"><hr size="1" class="line" /></td>
</tr>
<tr>
<th>銀行名稱</th>
<td>
<s:select key="stationBaseInfoSetBean.bankId" list="banks" listKey="id" listValue="bankName" disabled="%{readOnly}" />
</td>
<th>銀行帳戶型別</th>
<td>
<s:select key="stationBaseInfoSetBean.accountType" list="accountTypeList" listKey="dictdataValue" listValue="dictdataName" disabled="%{readOnly}" />
</td>
</tr>
<tr>
<th>賬號</th>
<td>
<s:textfield key="stationBaseInfoSetBean.bankAccount" cssClass="inputtext w-100p digits" data-rule-required="true" maxlength="20" disabled="%{readOnly}" />
</td>
<th>賬戶名稱</th>
<td>
<s:textfield key="stationBaseInfoSetBean.bankName" cssClass="inputtext required isGroupPart1" maxlength="30" disabled="%{readOnly}" />
</td>
</tr>
<tr>
<s:if test="%{readOnly}">
<th>銀行號</th>
<td>
<s:textfield key="stationBaseInfoSetBean.numberBank" cssClass="inputtext required" maxlength="100" readonly="%{readOnly}" />
</td>
</s:if>
<th>開戶行名稱</th>
<td colspan="3">
<s:if test="%{readOnly||stationBaseInfoSetBean.status==#PASS}">
<s:textfield key="stationBaseInfoSetBean.nameBank" cssClass="inputtext required" style="width:350px" maxlength="100" disabled="%{!readOnly}" />
<a href="javascript:void(0);" id="btnSearchNumberBank" class="button">查詢銀行號</a>
</s:if>
<s:else>
<s:textfield key="stationBaseInfoSetBean.nameBank" cssClass="inputtext required" style="width:350px" maxlength="100" disabled="%{readOnly}" />
【注：開戶行就是指辦理開戶手續的營業網點，查詢開戶號地址請諮詢銀行客服！】
</s:else>
</td>
</tr>
<tr>
<th>支付寶賬號</th>
<td>
<s:textfield key="stationBaseInfoSetBean.alipayId" cssClass="inputtext required" maxlength="30" disabled="%{readOnly}" />
</td>
<th>支付寶賬號名</th>
<td>
<s:textfield key="stationBaseInfoSetBean.alipayName" cssClass="inputtext required" maxlength="30" disabled="%{readOnly}" />
</td>
</tr>
<tr>
<th>企業狀態</th>
<td colspan="3">
<s:textfield key="stationBaseInfoSetBean.statusName" cssClass="inputtext" data-rule-required="true" maxlength="2" disabled="true" />
<s:hidden key="stationBaseInfoSetBean.statusName" />
</td>
</tr>
<s:if test="%{readOnly||stationBaseInfoSetBean.status==#PASS}">
<tr>
<th>標籤單價</th>
<td>
<s:textfield key="stationBaseInfoSetBean.labelUnit" cssClass="inputtext required number" maxlength="19" disabled="%{!readOnly}" />元/片
</td>
<th>貼標籤人工單價</th>
<td>
<s:textfield key="stationBaseInfoSetBean.labelingUnit" cssClass="inputtext required number" maxlength="19" disabled="%{!readOnly}" />元/片
</td>
</tr>
<tr>
<th>入庫費單價</th>
<td>
<s:textfield key="stationBaseInfoSetBean.storageUnit" cssClass="inputtext required number" maxlength="19" disabled="%{!readOnly}" />元/片
</td>
<th>出庫費單價</th>
<td>
<s:textfield key="stationBaseInfoSetBean.outboundUnit" cssClass="inputtext required number" maxlength="19" disabled="%{!readOnly}" />元/片
</td>
</tr>
<tr>
<th>分揀費單價</th>
<td colspan="3">
<s:textfield key="stationBaseInfoSetBean.sortUnit" cssClass="inputtext required number" maxlength="19" disabled="%{!readOnly}" />元/片
</td>
</tr>
</s:if>
<tr>
<td colspan="4" class="submit">
<input id="save" type="submit" href="javascript:void(0);" class="button" value="儲存" />
<s:hidden key="stationBaseInfoSetBean.status"/>
</td>
</tr>
</table>js:
// 提交頁面、 驗證
$("#stationBaseInfoSet").validate({
submitHandler:function(form) {
// 驗證OK回撥
// $("#stationBaseInfoSet").attr("action", "stationBaseInfoSet");
// form.submit();
// 阻止表單提交
return false;
},
invalidHandler : function(form, validator) { // 驗證NG回撥
// 阻止表單提交
return false;
}
});