jQueryValidate自定義各種驗證方法
jQuery Validate自定義各種驗證方法
validate-methods.js
/*****************************************************************
jQuery Validate擴充套件驗證方法
*****************************************************************/
$(function(){
// 判斷整數value是否等於0
jQuery.validator.addMethod("isIntEqZero", function(value, element) {
value=parseInt(value);
return this.optional(element) || value==0;
}, "整數必須為0");
// 判斷整數value是否大於0
jQuery.validator.addMethod("isIntGtZero", function(value, element) {
value=parseInt(value);
return this.optional(element) || value>0;
}, "整數必須大於0");
// 判斷整數value是否大於或等於0
jQuery.validator.addMethod("isIntGteZero", function(value, element) {
value=parseInt(value);
return this.optional(element) || value>=0;
}, "整數必須大於或等於0");
// 判斷整數value是否不等於0
jQuery.validator.addMethod("isIntNEqZero", function(value, element) {
value=parseInt(value);
return this.optional(element) || value!=0;
}, "整數必須不等於0");
// 判斷整數value是否小於0
jQuery.validator.addMethod("isIntLtZero", function(value, element) {
value=parseInt(value);
return this.optional(element) || value<0;
}, "整數必須小於0");
// 判斷整數value是否小於或等於0
jQuery.validator.addMethod("isIntLteZero", function(value, element) {
value=parseInt(value);
return this.optional(element) || value<=0;
}, "整數必須小於或等於0");
// 判斷浮點數value是否等於0
jQuery.validator.addMethod("isFloatEqZero", function(value, element) {
value=parseFloat(value);
return this.optional(element) || value==0;
}, "浮點數必須為0");
// 判斷浮點數value是否大於0
jQuery.validator.addMethod("isFloatGtZero", function(value, element) {
value=parseFloat(value);
return this.optional(element) || value>0;
}, "浮點數必須大於0");
// 判斷浮點數value是否大於或等於0
jQuery.validator.addMethod("isFloatGteZero", function(value, element) {
value=parseFloat(value);
return this.optional(element) || value>=0;
}, "浮點數必須大於或等於0");
// 判斷浮點數value是否不等於0
jQuery.validator.addMethod("isFloatNEqZero", function(value, element) {
value=parseFloat(value);
return this.optional(element) || value!=0;
}, "浮點數必須不等於0");
// 判斷浮點數value是否小於0
jQuery.validator.addMethod("isFloatLtZero", function(value, element) {
value=parseFloat(value);
return this.optional(element) || value<0;
}, "浮點數必須小於0");
// 判斷浮點數value是否小於或等於0
jQuery.validator.addMethod("isFloatLteZero", function(value, element) {
value=parseFloat(value);
return this.optional(element) || value<=0;
}, "浮點數必須小於或等於0");
// 判斷浮點型
jQuery.validator.addMethod("isFloat", function(value, element) {
return this.optional(element) || /^[-+]?d+(.d+)?$/.test(value);
}, "只能包含數字、小數點等字元");
// 匹配integer
jQuery.validator.addMethod("isInteger", function(value, element) {
return this.optional(element) || (/^[-+]?d+$/.test(value) && parseInt(value)>=0);
}, "匹配integer");
// 判斷數值型別，包括整數和浮點數
jQuery.validator.addMethod("isNumber", function(value, element) {
return this.optional(element) || /^[-+]?d+$/.test(value) || /^[-+]?d+(.d+)?$/.test(value);
}, "匹配數值型別，包括整數和浮點數");
// 只能輸入[0-9]數字
jQuery.validator.addMethod("isDigits", function(value, element) {
return this.optional(element) || /^d+$/.test(value);
}, "只能輸入0-9數字");
// 判斷中文字元
jQuery.validator.addMethod("isChinese", function(value, element) {
return this.optional(element) || /^[u0391-uFFE5]+$/.test(value);
}, "只能包含中文字元。");
// 判斷英文字元
jQuery.validator.addMethod("isEnglish", function(value, element) {
return this.optional(element) || /^[A-Za-z]+$/.test(value);
}, "只能包含英文字元。");
// 手機號碼驗證
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+d{8})$/.test(value));
}, "請正確填寫您的手機號碼。");
// 電話號碼驗證
jQuery.validator.addMethod("isPhone", function(value, element) {
var tel = /^(d{3,4}-?)?d{7,9}$/g;
return this.optional(element) || (tel.test(value));
}, "請正確填寫您的電話號碼。");
// 聯絡電話(手機/電話皆可)驗證
jQuery.validator.addMethod("isTel", function(value,element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+d{8})$/;
var tel = /^(d{3,4}-?)?d{7,9}$/g;
return this.optional(element) || tel.test(value) || (length==11 && mobile.test(value));
}, "請正確填寫您的聯絡方式");
// 匹配qq
jQuery.validator.addMethod("isQq", function(value, element) {
return this.optional(element) || /^[1-9]d{4,12}$/;
}, "匹配QQ");
// 郵政編碼驗證
jQuery.validator.addMethod("isZipCode", function(value, element) {
var zip = /^[0-9]{6}$/;
return this.optional(element) || (zip.test(value));
}, "請正確填寫您的郵政編碼。");
// 匹配密碼，以字母開頭，長度在6-12之間，只能包含字元、數字和下劃線。
jQuery.validator.addMethod("isPwd", function(value, element) {
return this.optional(element) || /^[a-zA-Z]\w{6,12}$/.test(value);
}, "以字母開頭，長度在6-12之間，只能包含字元、數字和下劃線。");
// 身份證號碼驗證
jQuery.validator.addMethod("isIdCardNo", function(value, element) {
//var idCard = /^(d{6})()?(d{4})(d{2})(d{2})(d{3})(w)$/;
return this.optional(element) || isIdCardNo(value);
}, "請輸入正確的身份證號碼。");
// IP地址驗證
jQuery.validator.addMethod("ip", function(value, element) {
return this.optional(element) || /^(([1-9]|([1-9]d)|(1dd)|(2([0-4]d|5[0-5]))).)(([1-9]|([1-9]d)|(1dd)|(2([0-4]d|5[0-5]))).){2}([1-9]|([1-9]d)|(1dd)|(2([0-4]d|5[0-5])))$/.test(value);
}, "請填寫正確的IP地址。");
// 字元驗證，只能包含中文、英文、數字、下劃線等字元。
jQuery.validator.addMethod("stringCheck", function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9u4e00-u9fa5-_]+$/.test(value);
}, "只能包含中文、英文、數字、下劃線等字元");
// 匹配english
jQuery.validator.addMethod("isEnglish", function(value, element) {
return this.optional(element) || /^[A-Za-z]+$/.test(value);
}, "匹配english");
// 匹配漢字
jQuery.validator.addMethod("isChinese", function(value, element) {
return this.optional(element) || /^[u4e00-u9fa5]+$/.test(value);
}, "匹配漢字");
// 匹配中文(包括漢字和字元)
jQuery.validator.addMethod("isChineseChar", function(value, element) {
return this.optional(element) || /^[u0391-uFFE5]+$/.test(value);
}, "匹配中文(包括漢字和字元) ");
// 判斷是否為合法字元(a-zA-Z0-9-_)
jQuery.validator.addMethod("isRightfulString", function(value, element) {
return this.optional(element) || /^[A-Za-z0-9_-]+$/.test(value);
}, "判斷是否為合法字元(a-zA-Z0-9-_)");
// 判斷是否包含中英文特殊字元，除英文"-_"字元外
jQuery.validator.addMethod("isContainsSpecialChar", function(value, element) {
var reg = RegExp(/[( )(`)(~)(!)(@)(#)($)(\%)(^)(&)(*)(()())(+)(=)(|)({)(})(`)(:)(;)(`)(`,)([)(])(.)(<)(>)(/)(?)(~)(！)(@)(#)(￥)(\%)(…)(&)(*)(（)(）)(—)(+)(|)({)(})(【)(】)(‘)(；)(：)(”)(“)(’)(。)(，)(、)(？)]+/);
return this.optional(element) || !reg.test(value);
}, "含有中英文特殊字元");
//身份證號碼的驗證規則
function isIdCardNo(num){
//if (isNaN(num)) {alert("輸入的不是數字！"); return false;}
var len = num.length, re;
if (len == 15)
re = new RegExp(/^(d{6})()?(d{2})(d{2})(d{2})(d{2})(w)$/);
else if (len == 18)
re = new RegExp(/^(d{6})()?(d{4})(d{2})(d{2})(d{3})(w)$/);
else {
//alert("輸入的數字位數不對。");
return false;
}
var a = num.match(re);
if (a != null)
{
if (len==15)
{
var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);
var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
}
else
{
var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);
var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
}
if (!B) {
//alert("輸入的身份證號 "+ a[0] +" 裡出生日期不對。");
return false;
}
}
if(!re.test(num)){
//alert("身份證最後一位只能是數字和字母。");
return false;
}
return true;
}
});
//車牌號校驗
function isPlateNo(plateNo){
var re = /^[u4e00-u9fa5]{1}[A-Z]{1}[A-Z_0-9]{5}$/;
if(re.test(plateNo)){
return true;
}
return false;
}
二、測試-validate-methods.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":"
+ request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>jQuery Validate擴充套件驗證方法</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.metadata.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/validate-methods.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/messages_zh.js"></script>
<script type="text/javascript">
$(function(){
var validate = $("#myform").validate({
debug: true, //除錯模式取消submit的預設提交功能
submitHandler: function(form){ //表單提交控制程式碼,為一回撥函式，帶一個引數：form
alert("提交表單");
form.submit(); //提交表單
},
rules:{
zero:{
//isIntEqZero:true
//isFloat:true
//isInteger:true
//isNumber:true
//isMobile:true
//isPhone:true
//isTel:true
//isIdCardNo:true
//isRightfulString:true
isContainsSpecialChar:true
}
},
//如果驗證控制元件沒有message，將呼叫預設的資訊
messages:{
zero:{
//isIntEqZero:"請輸入0"
//isFloat:"請輸入浮點數"
//isInteger:"請輸入整數"
}
}
});
});
</script>
</head>
<body>
<form id="myform" method="post" action="">
<p>
<label for="zero">輸入框：</label>
<!-- id和name最好同時寫上 -->
<input id="zero" name="zero" />
</p>
<p>
<input class="submit" type="submit" value="驗證" />
</p>
</form>
</body>
</html>
相關文章
- CAS自定義登入驗證方法
- JqueryValidate 動態新增驗證jQuery
- Laravel 自定義表單驗證-自定義驗證規則Laravel
- js各種驗證總結JS
- Layui 自定義表單驗證UI
- MVC驗證02-自定義驗證規則、郵件驗證MVC
- MVC驗證07-自定義Model級別驗證MVC
- MVC驗證04-自定義驗證規則、日期範圍驗證MVC
- 自定義react資料驗證元件React元件
- 自定義密碼驗證函式密碼函式
- 各種 SAP 產品的自定義 UI 建立和整合方法一覽UI
- mongoose使用validate驗證， 獲取自定義驗證資訊Go
- PHP表單提交驗證各種方式PHP
- 表單驗證自定義格式輸出
- gin自定義驗證器&轉化中文
- django 自定義登入驗證邏輯Django
- Angular 4.x 自定義驗證指令Angular
- Android自定義View---驗證碼AndroidView
- HTML5 pattern自定義驗證提示HTML
- jQuery Validate自定義驗證成功資訊jQuery
- 自定義基於XML的驗證器XML
- MVC驗證05-自定義驗證規則、驗證2個屬性值不等MVC
- Laravel 自定義表單請求驗證忽略某些欄位驗證Laravel
- 11-自定義cell（2種方法）
- 自定義一個簡單的資料模型驗證器類,可用於各類驗證場景，待後續完善模型
- Laravel 自定義驗證規則的問題Laravel
- HTML5 pattern自定義驗證規則HTML
- jQuery Validate自定義驗證錯誤資訊jQuery
- jQuery Validate新增自定義驗證規則jQuery
- gRPC（七）進階：自定義身份驗證RPC
- MVC驗證06-自定義錯誤資訊MVC
- Flutter 通過Clipper實現各種自定義形狀Flutter
- stl中各種容器的自定義比較函式函式
- MVC驗證03-自定義驗證規則、禁止輸入某些值MVC
- thinkphp驗證器獲取$data資料，自定義驗證，多條件唯一性驗證unique驗證PHP
- 驗證裡，PHP 檔案中指定自定義值PHP
- HTML5 自定義驗證資訊顯示方式HTML
- Android自定義方形驗證碼輸入框Android