jquery.validate Benutzerdefinierte Validierungsmethoden und Validierung zugehöriger Parameter_jquery

Jquery-Validierung relevanter Parameter

//定义中文消息
var cnmsg = {
required: “必选字段”,
remote: “请修正该字段”,
email: “请输入正确格式的电子邮件”,
url: “请输入合法的网址”,
date: “请输入合法的日期”,
dateISO: “请输入合法的日期 (ISO).”,
number: “请输入合法的数字”,
digits: “只能输入整数”,
creditcard: “请输入合法的信用卡号”,
equalTo: “请再次输入相同的值”,
accept: “请输入拥有合法后缀名的字符串”,
maxlength: jQuery.format(“请输入一个长度最多是 {0} 的字符串”),
minlength: jQuery.format(“请输入一个长度最少是 {0} 的字符串”),
rangelength: jQuery.format(“请输入一个长度介于 {0} 和 {1} 之间的字符串”),
range: jQuery.format(“请输入一个介于 {0} 和 {1} 之间的值”),
max: jQuery.format(“请输入一个最大为 {0} 的值”),
min: jQuery.format(“请输入一个最小为 {0} 的值”)
};
jQuery.extend(jQuery.validator.messages, cnmsg);

Benutzerdefinierte Verifizierung validieren

$(document).ready( function() {
/**
* 身份证号码验证
*
*/
function isIdCardNo(num) {
var factorArr = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);
var parityBit=new Array("1","0","X","9","8","7","6","5","4","3","2");
var varArray = new Array();
var intValue;
var lngProduct = 0;
var intCheckDigit;
var intStrLen = num.length;
var idNumber = num;
// initialize
if ((intStrLen != 15) && (intStrLen != 18)) {
return false;
}
// check and set value
for(i=0;i<intStrLen;i++) {
varArray[i] = idNumber.charAt(i);
if ((varArray[i] < '0' || varArray[i] > '9') && (i != 17)) {
return false;
} else if (i < 17) {
varArray[i] = varArray[i] * factorArr[i];
}
}
if (intStrLen == 18) {
//check date
var date8 = idNumber.substring(6,14);
if (isDate8(date8) == false) {
return false;
}
// calculate the sum of the products
for(i=0;i<17;i++) {
lngProduct = lngProduct + varArray[i];
}
// calculate the check digit
intCheckDigit = parityBit[lngProduct % 11];
// check last digit
if (varArray[17] != intCheckDigit) {
return false;
}
}
else{ //length is 15
//check date
var date6 = idNumber.substring(6,12);
if (isDate6(date6) == false) {
return false;
}
}
return true;
}
/**
* 判断是否为“YYYYMM”式的时期
*
*/
function isDate6(sDate) {
if(!/^[0-9]{6}$/.test(sDate)) {
return false;
}
var year, month, day;
year = sDate.substring(0, 4);
month = sDate.substring(4, 6);
if (year < 1700 || year > 2500) return false
if (month < 1 || month > 12) return false
return true
}
/**
* 判断是否为“YYYYMMDD”式的时期
*
*/
function isDate8(sDate) {
if(!/^[0-9]{8}$/.test(sDate)) {
return false;
}
var year, month, day;
year = sDate.substring(0, 4);
month = sDate.substring(4, 6);
day = sDate.substring(6, 8);
var iaMonthDays = [31,28,31,30,31,30,31,31,30,31,30,31]
if (year < 1700 || year > 2500) return false
if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) iaMonthDays[1]=29;
if (month < 1 || month > 12) return false
if (day < 1 || day > iaMonthDays[month - 1]) return false
return true
}
// 身份证号码验证 
jQuery.validator.addMethod("idcardno", function(value, element) {
return this.optional(element) || isIdCardNo(value); 
}, "请正确输入身份证号码");
//字母数字
jQuery.validator.addMethod("alnum", function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);
}, "只能包括英文字母和数字");
// 邮政编码验证
jQuery.validator.addMethod("zipcode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写邮政编码");
// 汉字
jQuery.validator.addMethod("chcharacter", function(value, element) {
var tel = /^[\u4e00-\u9fa5]+$/;
return this.optional(element) || (tel.test(value));
}, "请输入汉字");
// 字符最小长度验证（一个中文字符长度为2）
jQuery.validator.addMethod("stringMinLength", function(value, element, param) {
var length = value.length;
for ( var i = 0; i < value.length; i++) {
if (value.charCodeAt(i) > 127) {
length++;
}
}
return this.optional(element) || (length >= param);
}, $.validator.format("长度不能小于{0}!"));
// 字符最大长度验证（一个中文字符长度为2）
jQuery.validator.addMethod("stringMaxLength", function(value, element, param) {
var length = value.length;
for ( var i = 0; i < value.length; i++) {
if (value.charCodeAt(i) > 127) {
length++;
}
}
return this.optional(element) || (length <= param);
}, $.validator.format("长度不能大于{0}!"));
// 字符验证
jQuery.validator.addMethod("string", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "不允许包含特殊符号!");
// 手机号码验证
jQuery.validator.addMethod("mobile", function(value, element) {
var length = value.length;
return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value));
}, "手机号码格式错误!");
// 电话号码验证
jQuery.validator.addMethod("phone", function(value, element) {
var tel = /^(\d{3,4}-&#63;)&#63;\d{7,9}$/g;
return this.optional(element) || (tel.test(value));
}, "电话号码格式错误!");
// 邮政编码验证
jQuery.validator.addMethod("zipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "邮政编码格式错误!");
// 必须以特定字符串开头验证
jQuery.validator.addMethod("begin", function(value, element, param) {
var begin = new RegExp("^" + param);
return this.optional(element) || (begin.test(value));
}, $.validator.format("必须以 {0} 开头!"));
// 验证两次输入值是否不相同
jQuery.validator.addMethod("notEqualTo", function(value, element, param) {
return value != $(param).val();
}, $.validator.format("两次输入不能相同!"));
// 验证值不允许与特定值等于
jQuery.validator.addMethod("notEqual", function(value, element, param) {
return value != param;
}, $.validator.format("输入值不允许为{0}!"));
// 验证值必须大于特定值(不能等于)
jQuery.validator.addMethod("gt", function(value, element, param) {
return value > param;
}, $.validator.format("输入值必须大于{0}!"));
// 验证值小数位数不能超过两位
jQuery.validator.addMethod("decimal", function(value, element) {
var decimal = /^-&#63;\d+(\.\d{1,2})&#63;$/;
return this.optional(element) || (decimal.test(value));

jQuery.validate-Nutzung

Montag, 12. April 2010 14:33

Name Rückgabetyp Beschreibung

validate(options) gibt zurück: Validator zur Überprüfung des ausgewählten FORMULARS

valid() gibt Folgendes zurück: Boolescher Wert, um zu prüfen, ob die Überprüfung bestanden wurde

rules() gibt Folgendes zurück: Optionen Gibt die Validierungsregeln des Elements zurück

rules(add,rules) gibt zurück: Optionen zum Hinzufügen von Verifizierungsregeln

Regeln(entfernen,Regeln)

jquery.validate ist ein sehr gutes Verifizierungsframework, das auf jquery basiert. Wir können damit schnell einige gängige Eingaben überprüfen und unsere eigenen Verifizierungsmethoden erweitern. Es bietet auch eine sehr gute Unterstützung für die Internationalisierung.

offizielle jquery.validate-Website: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Verwendung:

1. Laden Sie zuerst jquery.js und jquery.validate.js herunter und importieren Sie die js-Datei (Hinweis: jquery muss vor jquery.validate.js eingeführt werden, sonst wird ein Fehler gemeldet)

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

2. Schreiben Sie den Formularcode, der überprüft werden muss, und schreiben Sie den Bestätigungscode (es gibt zwei Möglichkeiten, den Bestätigungscode zu schreiben: Verwenden Sie zuerst die normale Methode)

var validator = $("formId").validate({// #formId为需要进行验证的表单ID
errorElement :"div",// 使用"div"标签标记错误， 默认:"label"
wrapper:"li",// 使用"li"标签再把上边的errorELement包起来
errorClass :"validate-error",// 错误提示的css类名"error"
onsubmit:true,// 是否在提交是验证,默认:true
onfocusout:true,// 是否在获取焦点时验证,默认:true
onkeyup :true,// 是否在敲击键盘时验证,默认:true
onclick:false,// 是否在鼠标点击时验证（一般验证checkbox,radiobox）
focusCleanup:false,// 当未通过验证的元素获得焦点时,并移除错误提示
rules: {
loginName: {// 需要进行验证的输入框name
required: true// 验证条件：必填
},
loginPassword: {// 需要进行验证的输入框name
required: true,// 验证条件：必填
minlength: 5// 验证条件：最小长度为5
},
email: {// 需要进行验证的输入框name
required: true,// 验证条件：必填
email: true// 验证条件：格式为email
}
},
messages: {
loginName: {
required: "用户名不允许为空!"// 验证未通过的消息
},
loginPassword: {
required: "密码不允许为空!",
minlength: jQuery.format("密码至少输入 {0} 字符!")
},
email: {
required: "email不允许为空",
email: "邮件地址格式错误!"
}
}

2. Verwenden Sie die Meta-String-Methode zur Überprüfung, dh überprüfen Sie den Inhalt und schreiben Sie ihn in die Klasse (beachten Sie, dass die Meta-String-Methode die Einführung der Datei jquery.metadata.js erfordert)

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<form id="validate" action="admin/transfer!save.action" method="post">
<input type="text" class="required" name="entity.name" />
<input type="text" class="email" name="entity.email" />
<input type="submit" class="button" value="提 交" />
</form>
<script type="text/javascript">
$(document).ready(
function() {
$("#formId").validate({// #formId为需要进行验证的表单ID
meta :"validate"// 采用meta String方式进行验证（验证内容与写入class中）
errorElement :"div",// 使用"div"标签标记错误， 默认:"label"
wrapper:"li",// 使用"li"标签再把上边的errorELement包起来
errorClass :"validate-error",// 错误提示的css类名"error"
onsubmit:true,// 是否在提交是验证,默认:true
onfocusout:true,// 是否在获取焦点时验证,默认:true
onkeyup :true,// 是否在敲击键盘时验证,默认:true
onclick:false,// 是否在鼠标点击时验证（一般验证checkbox,radiobox）
focusCleanup:false,// 当未通过验证的元素获得焦点时,并移除错误提示
});
})
</script>

Hinweis: In Struts2-Anwendungen stoßen wir häufig auf Eingabeformulare in der Form name="entity.name" (d. h. wenn der Name Kommas oder andere Sonderzeichen enthält), können wir den obigen Namen in Anführungszeichen setzen ( "") Das ist es, zum Beispiel:

rules: {
"entity.loginName": {// 需要进行验证的输入框name
required: true// 验证条件：必填
}
},
messages: {
"entity.loginName": {
required: "用户名不允许为空!"// 验证未通过的消息
}
}

Sie können mir eine E-Mail senden: happyczx@126.com, um gemeinsam Fragen im Zusammenhang mit der Java-Technologie zu besprechen

Ein Teil des obigen Codes stammt aus dem Open-Source-Zahlungssystem payj. Dieses Java-Open-Source-Projekt enthält viele hervorragende Anwendungsquellcodes von Struts2 Spring Hibernate JQuery und anderen Frameworks, die einen Blick wert sind. Ich möchte es hier zuerst empfehlen, haha. . .

ps: Jquery Validate Verifizierungsregeln

(1)erforderlich:true erforderliches Feld
(2)remote:“check.php“ Verwenden Sie die Ajax-Methode, um check.php aufzurufen, um den Eingabewert zu überprüfen
(3)email:true Sie müssen eine E-Mail im richtigen Format
eingeben (4)url:true Sie müssen die URL im richtigen Format
eingeben (5)date:true Sie müssen das Datum im richtigen Format
eingeben (6)dateISO:true Sie müssen das Datum (ISO) im richtigen Format eingeben, zum Beispiel: 23.06.2009, 22.01.1998. Es wird nur das Format überprüft, nicht die Gültigkeit
(7)number:true Sie müssen eine gültige Zahl eingeben (negative Zahl, Dezimalzahl)
(8)digits:true muss eine Ganzzahl eingeben
(9)Kreditkarte: Es muss eine gültige Kreditkartennummer eingegeben werden
(10)equalTo:“#field“ Der Eingabewert muss mit #field
identisch sein (11)akzeptieren: Geben Sie eine Zeichenfolge mit einem legalen Suffix (dem Suffix der hochgeladenen Datei)
ein (12)maxlength:5 Geben Sie eine Zeichenfolge mit einer maximalen Länge von 5 ein (chinesische Zeichen zählen als ein Zeichen)
(13)minlength:10 Geben Sie eine Zeichenfolge mit einer Mindestlänge von 10 ein (chinesische Zeichen zählen als ein Zeichen)
(14)rangelength:[5,10] Die Eingabelänge muss zwischen 5 und 10 Zoll liegen (chinesische Zeichen zählen als ein Zeichen)
(15)Bereich:[5,10] Der Eingabewert muss zwischen 5 und 10 liegen
(16)max:5 Der Eingabewert darf nicht größer als 5 sein
(17)min:10 Der Eingabewert darf nicht kleiner als 10 sein

JQuery validieren, senden, senden

submitHandler: Die Funktion, die nach bestandener Überprüfung ausgeführt wird, muss die Funktion zum Senden des Formulars enthalten, andernfalls wird das Formular nicht gesendet
$(".selector").validate({ subscribeHandler:function(form) { $(form).ajaxSubmit(); //JQuery-Formularfunktion verwenden } })

Jquery Validate error error prompt dom

.errorPlacement: Rückruf Standard: Fügen Sie die Fehlermeldung nach dem validierten Element
ein Geben Sie den Ort an, an dem der Fehler platziert wird: error.appendTo(element.parent()); das heißt, die Fehlermeldung wird hinter dem überprüften Element
platziert

errorPlacement: function(error, element) {
error.appendTo(element.parent());
}

Legen Sie den Stil der Fehleraufforderung fest. Sie können eine Symbolanzeige hinzufügen, z. B.:

input.error { border: 1px solid red; }
label.error {
background:url(“./demo/images/unchecked.gif”) no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}