jqueryカスタム検証
17307 ワード
$(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}-?)?\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 = /^-?\d+(\.\d{1,2})?$/;
return this.optional(element) || (decimal.test(value));
jQuery.validate
2010 04 12 14:33
validate(options) :Validator FORM
valid() :Boolean
rules() :Options
rules(add,rules) :Options
rules(remove,rules)
jquery.validate jquery ， , ， 。
jquery.validate ：http://bassistance.de/jquery-plugins/jquery-plugin-validation/
：
1、 jquery.js jquery.validate.js js ( ：jquery jquery.validate.js ， )
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
2、 ( ， )
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、 meta String ， class ( meta String jquery.metadata.js )
<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>
： Struts2 name="entity.name" input ( name ), ("") ， ：
rules: {
"entity.loginName": {// name
required: true// ：
}
},
messages: {
"entity.loginName": {
required: " !"//
}
}
email:[email protected] java
payj ， java Struts2 spring hibernate jquery ， 。 ， 。。。
。
：
：
required() :Boolean
required(dependency-expression) :Boolean
required(dependency-callback) :Boolean
remote(url) :Boolean 。url
minlength(length) :Boolean
maxlength(length) :Boolean
rangelength(range) :Boolean [min,max]
min(value) :Boolean
max(value) :Boolean
email() :Boolean
range(range) :Boolean
url() :Boolean URL
date() :Boolean ( 30/30/2008 , )
dateISO() :Boolean ISO
dateDE() :Boolean （29.04.1994 or 1.1.2006）
number() :Boolean （ ）
digits() :Boolean
creditcard() :Boolean
accept(extension) :Boolean
equalTo(other) :Boolean
phoneUS() :Boolean
validate () ：
debug: （ ）: $(".selector").validate
({
debug:true
})
: $.validator.setDefaults({
debug:true
})
submitHandler:
, , $(".selector").validate({
submitHandler:function(form) {
$(form).ajaxSubmit();
}
})
ignore:
$("#myform").validate({
ignore:".ignore"
})
rules:
,key:value ,key ,value $(".selector").validate({
rules:{
name:"required",
email:{
required:true,
email:true
}
}
})
messages:
key:value key , $(".selector").validate({
rules:{
name:"required",
email:{
required:true,
email:true
}
},
messages:{
name:"Name ",
email:{
required:"E-mail ",
email:"E-mail "
}
}
})
groups:
, , error Placement $("#myform").validate({
groups:{
username:"fname lname"
},
errorPlacement:function(error,element) {
if (element.attr("name") == "fname" || element.attr("name") == "lname")
error.insertAfter("#lastname");
else
error.insertAfter(element);
},
debug:true
})
Onubmit Boolean :true
$(".selector").validate({
onsubmit:false
})
onfocusout Boolean :true
$(".selector").validate({
onfocusout:false
})
onkeyup Boolean :true
$(".selector").validate({
onkeyup:false
})
onclick Boolean :true
（ checkbox,radiobox） $(".selector").validate({
onclick:false
})
focusInvalid Boolean :true
, ( ) $(".selector").validate({
focusInvalid:false
})
focusCleanup Boolean :false
, （ focusInvalid. ） $(".selector").validate({
focusCleanup:true
})
errorClass String :"error"
css , $(".selector").validate({
errorClass:"invalid"
})
errorElement String :"label"
$(".selector").validate
errorElement:"em"
})
wrapper String
errorELement $(".selector").validate({
wrapper:"li"
})
errorLabelContainer Selector
$("#myform").validate({
errorLabelContainer:"#messageBox",
wrapper:"li",
submitHandler:function() { alert("Submitted!") }
})
showErrors:
, $(".selector").validate({
showErrors:function(errorMap,errorList) {
$("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
this.defaultShowErrors();
}
})
errorPlacement:
, $("#myform").validate({
rrorPlacement:function(error,element) { error.appendTo(element.parent("td").next("td"));
},
debug:true
})
success:
, , css , $("#myform").validate({
success:"valid",
submitHandler:function() { alert("Submitted!") }
})
highlight:
,
addMethod(name,method,message) ：
name
method , (value,element,param) value ,element param , addMethod built-in Validation methods
, , a-f, :
$.validator.addMethod("af",function(value,element,params){
if(value.length>1){
return false;
}
if(value>=params[0] && value<=params[1]){
return true;
}else{
return false;
}
}," , a-f");
, id="username", rules
username:{
af:["a","f"]
}
addMethod , , af
addMethod , , :" , a-f"
addMethod , , ,
, , af:"a", a , , [] ,
}, $.validator.format(" !"));
});