インスタンス詳細jQueryフォーム検証プラグインvalidate

22855 ワード

validateプラグインはjqueryベースのフォーム検証プラグインです.多くの一般的な検証方法があります.直接呼び出すことができます.具体的には、一緒に見てみましょう.
例、htmlコード

をします.

$(document).ready(function(){
//
$('#submit').click(function(){
var pay_password = $('#pay_password').val();
var password_Repeat = $('#password_Repeat').val();
var password_old = $('#password_old').val();
var data = {
'pay_password':pay_password,
'password_Repeat':password_Repeat,
'password_old':password_old
};
console.info(data);
var v = $('#form').validate({
rules : {
pay_password : {
required : true,
minlength : 6,
ismypassword : true
},
password_Repeat : {
required : true,
minlength : 6,
ismypassword : true
},
password_old : {
required : true,
minlength : 6,
}
},
messages : {
pay_password : {
required:「パスワードをしてください」、
minlength:「のさは6 ではいけません」、
ismypasword:「パスワードは、、 (!,.@#$%^&*?~)でするがあります」
},
password_Repeat : {
required:「パスワードをしてください」、
minlength:「のさは6 ではいけません」、
ismypasword:「パスワードは、、 (!,.@#$%^&*?~)でするがあります」
},
password_old : {
required:「パスワードをしてください」、
minlength:「のさは6 ではいけません」、
},
}
});
if(pay_password != password_Repeat){
alert(「パスワードがしません. をしてください!」);return false;
}
//---------------------------------
if(!v.form())return false;
$.ajax({
url:'{:U("Merchant/ajax_pw")}',
data: data,
beforeSend:function(){
},
success:function(res){
if(res == 1){
alert("パスワード ");・13;
}
if(res == 0){
alert(「パスワードは2 じで、はしていません」);・13;
}
if(res != 0 && res != 1){
alert(res);
}
}
});
//------------------------
});
})


messages_cn.js 


jQuery.extend(jQuery.validator.messages, {
required: "    ",
remote: "      ",
email: "            ",
url: "        ",
date: "        ",
dateISO: "         (ISO).",
number: "        ",
digits: "      ",
creditcard: "          ",
equalTo: "         ",
accept: "              ",
maxlength: jQuery.validator.format("            {0}     "),
minlength: jQuery.validator.format("            {0}     "),
rangelength: jQuery.validator.format("           {0}   {1}       "),
range: jQuery.validator.format("        {0}   {1}     "),
max: jQuery.validator.format("        {0}   "),
min: jQuery.validator.format("        {0}   ")
});

 validator 
 
jquery.validate 
 jquery.validate API 
 jquery.validate 
 jquery.validate 
 
jquery.validate 
 
http://docs.jquery.com/Plugins/Validation
 
jquery.validate 
 
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
 
jquery.validate demo
 
http://jquery.bassistance.de/validate/demo/
 
 
 ， 
(1)required:true 
 (2)remote:"check.php" ajax check.php 
 (3)email:true 
 (4)url:true 
 (5)date:true 
 (6)dateISO:true (ISO)， ：2009-06-23，1998/01/22 ， 
 (7)number:true ( ， )
 (8)digits:true 
 (9)creditcard: 
 (10)equalTo:"#field" #field 
 (11)accept: （ ）
 (12)maxlength:5 5 ( )
 (13)minlength:10 10 ( )
 (14)rangelength:[5,10] 5 10 ")( )
 (15)range:[5,10] 5 10 
 (16)max:5 5
 (17)min:10 10
 
 ， ， jQuery.extend(jQuery.validator.messages ， 。
 


required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")

 
 
1：
 ， ：
 ( )




2：
 ， ：
 ( ,[3,5])






3:
 
 javascript ， JS ，password confirm_password


$().ready(function() {
$("#form2").validate({
rules: {
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: {
password: {
required: "      ",
minlength: jQuery.format("      {0}   ")
},
confirm_password: {
required: "      ",
minlength: "        {0}   ",
equalTo: "          "
}
}
});
});

required true/false ， ， 


$("#form2").validate({
rules: {
funcvalidate: {
required: function() {return $("#password").val()!=""; }
}
},
messages: {
funcvalidate: {
required: "         "
}
}
});

Html


  
    
    

4：
 
 meta 
 
 JS meta


$("#form3").validate({ meta: "validate" }); 

Html
 


email

5:
 
 meta ， validate
 
JS meta


$().ready(function() {
$.metadata.setType("attr", "validate");
$("#form1").validate();
});

Html
 
Email






6:
 
 
 ， jQuery.validator.addMethod 
 
 additional-methods.js ， lettersonly，ziprange，nowhitespace 
 
 


//      
jQuery.validator.addMethod("userName", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "          、    、      "); 
//            
$("#form1").validate({
//     
rules: {
userName: {
required: true,
userName: true,
rangelength: [5,10]
}
},
/*        */
messages: {
userName: {
required: "      ",
rangelength: "      5-10     "
} 
},
}); 

7:
radio、checkbox、select 
 
radio 
 
 



 

 




checkbox 
 
 



  1

  2

  3





select 
 
 






8:
 
Ajax 
 
 remote Ajax 


remote: {
url: "url", //url  
type: "post", //    
dataType: "json", //     data: { //      
username: function() {
return $("#username").val();
}}
}

Plugin methods
Name Type
 
validate( options ) Returns: Validator
 FORM
 
valid( ) Returns: Boolean
 
 
rules( ) Returns: Options
 
 
rules( "add", rules ) Returns: Options
 
 
rules( "remove", rules ) Returns: Options
 
 
removeAttrs( attributes ) Returns: Options
 
Custom selectors
 Name Type
 
:blank Returns: Array 
 
 
:filled Returns: Array 
 
 
:unchecked Returns: Array 
 
 Utilities
 
Name Type
 
jQuery.format( template, argument , argumentN... ) Returns: String
 {n}。
 Validator
 
validate Validator , ， form .
 
 .
 
form( ) Returns: Boolean
 form 
 
element( element ) Returns: Boolean
 
 
resetForm( ) Returns: undefined
 FORM 
 
showErrors( errors ) Returns: undefined
 
 built-in Validation methods
 
Name Type
 
setDefaults( defaults ) Returns: undefined
 
 
addMethod( name, method, message ) Returns: undefined
 . ， JAVASCRIPT 
 
addClassRules( name, rules ) Returns: undefined
 
 
addClassRules( rules ) Returns: undefined
 
 built-in Validation methods
 
Name Type
 
required( ) Returns: Boolean
 
 
required( dependency-expression ) Returns: Boolean
 .
 
required( dependency-callback ) Returns: Boolean
 .
 
remote( url ) Returns: Boolean
 。url 
 
minlength( length ) Returns: Boolean
 
 
maxlength( length ) Returns: Boolean
 
 
rangelength( range ) Returns: Boolean
 [min,max]
 
min( value ) Returns: Boolean
 .
 
max( value ) Returns: Boolean
 .
 
range( range ) Returns: Boolean
 
 
email( ) Returns: Boolean
 
 
url( ) Returns: Boolean
 
 
date( ) Returns: Boolean
 ( 30/30/2008 ， )
 
dateISO( ) Returns: Boolean
 ISO 
 
dateDE( ) Returns: Boolean
 （29.04.1994 or 1.1.2006）
 
number( ) Returns: Boolean
 （ ）
 
numberDE( ) Returns: Boolean
 Makes the element require a decimal number with german format.
 
digits( ) Returns: Boolean
 
 
creditcard( ) Returns: Boolean
 
 
accept( extension ) Returns: Boolean
 
 
equalTo( other ) Returns: Boolean
 
 
 jquery-validate 
 
1: 
 
 submitHandler 
 


$(".selector").validate({
submitHandler: function(form) { alert("    "); }
});



 ， 
 form.submit(); $(form).ajaxSubmit();
 
2: 
 
 debug true， ， ， 
 


$(".selector").validate({
debug: true
})



3: validate 
 
 setDefaults validate ， debug 
 


$.validator.setDefaults({
debug: true
})

4: 
 
 ignore 
 


$(".selector").validate({
ignore: "ignore"
})

5: 
 
jquery.validate 
 
onsubmit: 
 


$(".selector").validate({
onsubmit: false
})

onfocusout: (checkboxes/radio )
 


$(".selector").validate({
onfocusout: false
})

onkeyup: keyup 
 


$(".selector").validate({
onkeyup: false
})



onclick: checkboxes、radio .
 


$(".selector").validate({
onclick: false
})

6: 
 


//  max        
$.validator.messages.max = jQuery.format("Your totals musn't exceed {0}!");
//  equal  
$.validator.methods.equal = function(value, element, param) {
return value == param;
};



7: focusInvalid 
 


$(".selector").validate({
focusInvalid: false
})



8: focusCleanup
 
 True, ， class ， ， focusInvalid. 。
 


$(".selector").validate({
focusCleanup: true
})

9: meta
 
 meta 
 


$(".selector").validate({
meta: "validate",
})


 
 
 ， label , css class, css 。
 


/*         */
form input.error { border:solid 1px red;}
/*         */
form label.error{width: 200px;margin-left: 10px; color: Red;}



 ， jquery.validate 
 
 label ， errorElement 
 errorElement: html 
 


$(".selector").validate
errorElement: "em"
})

 。
 wrapper: html 
 


$(".selector").validate({
wrapper: "li"
})

 css class error， errorClass 
 errorClass: css class
 


$(".selector").validate({
errorClass: "invalid"
})



 
 success: ， css ， ， 
 


$(".selector").validate({
success: "valid"
})



 
 


success: function(label) {
label.html(" ").addClass("checked");
}



 
 errorLabelContainer: 
 


$("#myform").validate({
errorLabelContainer: "#messageBox"
})



 ， ， 
 


$(".selector").validate({
errorPlacement: function(error, element) {
error.appendTo( element.parent("td").next("td") );
}
})



 ， ， error Placement 
 groups： 
 


$(".selector").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);
}
})

 
 
highlight: ， errorClass
 unhighlight: highlight ， 
 


$(".selector").validate({
highlight: function(element, errorClass) {
$(element).addClass(errorClass);
$(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
},
unhighlight: function(element, errorClass) {
$(element).removeClass(errorClass);
$(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
}
});

 
 showErrors: 
 


$(".selector").validate({
showErrors: function(errorMap, errorList) {
$("#summary").html("Your form contains " + this.numberOfInvalids()
+ " errors, see details below.");
this.defaultShowErrors();
}
})

//       
jQuery.validator.addMethod("mobile", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
return this.optional(element) || (length == 11 && mobile.test(value));
}, "        "); 
//        
jQuery.validator.addMethod("phone", function(value, element) {
var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
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));
}, "        ");
// QQ     
jQuery.validator.addMethod("qq", function(value, element) {
var tel = /^[1-9]\d{4,9}$/;
return this.optional(element) || (tel.test(value));
}, "qq      ");
// IP    
jQuery.validator.addMethod("ip", function(value, element) {
var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Ip      ");
//         
jQuery.validator.addMethod("chrnum", function(value, element) {
var chrnum = /^([a-zA-Z0-9]+)$/;
return this.optional(element) || (chrnum.test(value));
}, "         (  A-Z, a-z, 0-9)");
//      
jQuery.validator.addMethod("chinese", function(value, element) {
var chinese = /^[\u4e00-\u9fa5]+$/;
return this.optional(element) || (chinese.test(value));
}, "      ");
//      
$.validator.addMethod("selectNone", function(value, element) {
return value == "   ";
}, "      ");
//       
jQuery.validator.addMethod("byteRangeLength", 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[0] && length <= param[1]);
}, $.validator.format("        {0}-{1}     (      2   )"));