本文介绍了一款功能丰富的jQuery表单验证插件，提供了多种验证示例，如用户名登录、用户注册、Email确认等。文章详细展示了插件的使用方法，包括规则设定和错误消息定制，适用于从事WEB编程的开发者。
这是一款jQuery 表单验证插件，不过它自带了好多种不同用途的表单验证示例，主要有用户名登录、用户注册、Email确认、自定义信息提示，单癣复选框判断、下拉列表选值判断、文件上传验证、多表单验证等。这些示例都是非常实用的，经常从事WEB编程的朋友值得拥有，有点遗憾是文档是英文。
前台部分代码
代码
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=ISO-8859-1" />
< title > jQuery validation plug-in - main demo </ title >
< link rel ="stylesheet" type ="text/css" media ="screen" href ="css/screen.css" />
< script src ="../lib/jquery.js" type ="text/javascript" ></ script >
< script src ="../jquery.validate.js" type ="text/javascript" ></ script >
< script src ="js/cmxforms.js" type ="text/javascript" ></ script >
< script type ="text/javascript" >
$.validator.setDefaults({
submitHandler: function () { alert( " submitted! " ); }
});
$().ready( function () {
// validate the comment form when it is submitted
$( " #commentForm " ).validate();
// validate signup form on keyup and submit
$( " #signupForm " ).validate({
rules: {
firstname: " required " ,
lastname: " required " ,
username: {
required: true ,
minlength: 2
},
password: {
required: true ,
minlength: 5
},
confirm_password: {
required: true ,
minlength: 5 ,
equalTo: " #password "
},
email: {
required: true ,
email: true
},
topic: {
required: " #newsletter:checked " ,
minlength: 2
},
agree: " required "
},
messages: {
firstname: " Please enter your firstname " ,
lastname: " Please enter your lastname " ,
username: {
required: " Please enter a username " ,
minlength: " Your username must consist of at least 2 characters "
},
password: {
required: " Please provide a password " ,
minlength: " Your password must be at least 5 characters long "
},
confirm_password: {
required: " Please provide a password " ,
minlength: " Your password must be at least 5 characters long " ,
equalTo: " Please enter the same password as above "
},
email: " Please enter a valid email address " ,
agree: " Please accept our policy "
}
});
// propose username by combining first- and lastname
$( " #username " ).focus( function () {
var firstname = $( " #firstname " ).val();
var lastname = $( " #lastname " ).val();
if (firstname && lastname && ! this .value) {
this .value = firstname + " . " + lastname;
}
});
// code to hide topic selection, disable for demo
var newsletter = $( " #newsletter " );
// newsletter topics are optional, hide at first
var inital = newsletter.is( " :checked " );
var topics = $( " #newsletter_topics " )[inital ? " removeClass " : " addClass " ]( " gray " );
var topicInputs = topics.find( " input " ).attr( " disabled " , ! inital);
// show when newsletter is checked
newsletter.click( function () {
topics[ this .checked ? " removeClass " : " addClass " ]( " gray " );
topicInputs.attr( " disabled " , ! this .checked);
});
});
</ script >
< style type ="text/css" >
#commentForm { width : 500px ; }
#commentForm label { width : 250px ; }
#commentForm label.error, #commentForm input.submit { margin-left : 253px ; }
#signupForm { width : 670px ; }
#signupForm label.error {
margin-left : 10px ;
width : auto ;
display : inline ;
}
#newsletter_topics label.error {
display : none ;
margin-left : 103px ;
}
</ style >
</ head >
< body >
< h1 id ="banner" >< a href ="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" > jQuery Validation Plugin </ a > Demo </ h1 >
< div id ="main" >
< p > Default submitHandler is set to display an alert into of submitting the form </ p >
< form class ="cmxform" id ="commentForm" method ="get" action ="" >
< fieldset >
< legend > Please provide your name, email address (won't be published) and a comment </ legend >
< p >
< label for ="cname" > Name (required, at least 2 characters) </ label >
< input id ="cname" name ="name" class ="required" minlength ="2" />
< p >
< label for ="cemail" > E-Mail (required) </ label >
< input id ="cemail" name ="email" class ="required email" />
</ p >
< p >
< label for ="curl" > URL (optional) </ label >
< input id ="curl" name ="url" class ="url" value ="" />
</ p >
< p >
< label for ="ccomment" > Your comment (required) </ label >
< textarea id ="ccomment" name ="comment" class ="required" ></ textarea >
</ p >
< p >
< input class ="submit" type ="submit" value ="Submit" />
</ p >
</ fieldset >
</ form >
< form class ="cmxform" id ="signupForm" method ="get" action ="" >
< fieldset >
< legend > Validating a complete form </ legend >
< p >
< label for ="firstname" > Firstname </ label >
< input id ="firstname" name ="firstname" />
</ p >
< p >
< label for ="lastname" > Lastname </ label >
< input id ="lastname" name ="lastname" />
</ p >
< p >
< label for ="username" > Username </ label >
< input id ="username" name ="username" />
</ p >
< p >
< label for ="password" > Password </ label >
< input id ="password" name ="password" type ="password" />
</ p >
< p >
< label for ="confirm_password" > Confirm password </ label >
< input id ="confirm_password" name ="confirm_password" type ="password" />
</ p >
< p >
< label for ="email" > Email </ label >
< input id ="email" name ="email" />
</ p >
< p >
< label for ="agree" > Please agree to our policy </ label >
< input type ="checkbox" id ="agree" name ="agree" />
</ p >
< p >
< label for ="newsletter" > I'd like to receive the newsletter </ label >
< input type ="checkbox" id ="newsletter" name ="newsletter" />
</ p >
< fieldset id ="newsletter_topics" >
< legend > Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo </ legend >
< label for ="topic_marketflash" >
< input type ="checkbox" id ="topic_marketflash" value ="marketflash" name ="topic" />
Marketflash
</ label >
< label for ="topic_fuzz" >
< input type ="checkbox" id ="topic_fuzz" value ="fuzz" name ="topic" />
Latest fuzz
</ label >
< label for ="topic_digester" >
< input type ="checkbox" id ="topic_digester" value ="digester" name ="topic" />
Mailing list digester
</ label >
< label for ="topic" class ="error" > Please select at least two topics you'd like to receive. </ label >
</ fieldset >
< p >
< input class ="submit" type ="submit" value ="Submit" />
</ p >
</ fieldset >
</ form >
< h3 > Syntetic examples </ h3 >
< ul >
< li >< a href ="errorcontainer-demo.html" > Error message containers in action </ a ></ li >
< li >< a href ="custom-messages-metadata-demo.html" > Custom Messages as Metadata </ a ></ li >
< li >< a href ="radio-checkbox-select-demo.html" > Radio and checkbox buttons and selects </ a ></ li >
< li >< a href ="ajaxSubmit-intergration-demo.html" > Integration with Form Plugin (AJAX submit) </ a ></ li >
< li >< a href ="custom-methods-demo.html" > Custom methods and message display. </ a ></ li >
< li >< a href ="dynamic-totals.html" > Dynamic forms </ a ></ li >
</ ul >
< h3 > Real-world examples </ h3 >
< ul >
< li >< a href ="milk/" > Remember The Milk signup form </ a ></ li >
< li >< a href ="marketo/" > Marketo signup form </ a ></ li >
< li >< a href ="multipart/" > Buy and Sell a House multipart form </ a ></ li >
< li >< a href ="captcha/" > Remote captcha validation </ a ></ li >
</ ul >
< h3 > Testsuite </ h3 >
< ul >
< li >< a href ="../test/" > Validation Testsuite </ a ></ li >
</ ul >
</ div >
< script src ="http://www.google-analytics.com/urchin.js" type ="text/javascript" >
</ script >
< script type ="text/javascript" >
_uacct = " UA-2623402-1 " ;
urchinTracker();
</ script >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=ISO-8859-1" />
< title > jQuery validation plug-in - main demo </ title >
< link rel ="stylesheet" type ="text/css" media ="screen" href ="css/screen.css" />
< script src ="../lib/jquery.js" type ="text/javascript" ></ script >
< script src ="../jquery.validate.js" type ="text/javascript" ></ script >
< script src ="js/cmxforms.js" type ="text/javascript" ></ script >
< script type ="text/javascript" >
$.validator.setDefaults({
submitHandler: function () { alert( " submitted! " ); }
});
$().ready( function () {
// validate the comment form when it is submitted
$( " #commentForm " ).validate();
// validate signup form on keyup and submit
$( " #signupForm " ).validate({
rules: {
firstname: " required " ,
lastname: " required " ,
username: {
required: true ,
minlength: 2
},
password: {
required: true ,
minlength: 5
},
confirm_password: {
required: true ,
minlength: 5 ,
equalTo: " #password "
},
email: {
required: true ,
email: true
},
topic: {
required: " #newsletter:checked " ,
minlength: 2
},
agree: " required "
},
messages: {
firstname: " Please enter your firstname " ,
lastname: " Please enter your lastname " ,
username: {
required: " Please enter a username " ,
minlength: " Your username must consist of at least 2 characters "
},
password: {
required: " Please provide a password " ,
minlength: " Your password must be at least 5 characters long "
},
confirm_password: {
required: " Please provide a password " ,
minlength: " Your password must be at least 5 characters long " ,
equalTo: " Please enter the same password as above "
},
email: " Please enter a valid email address " ,
agree: " Please accept our policy "
}
});
// propose username by combining first- and lastname
$( " #username " ).focus( function () {
var firstname = $( " #firstname " ).val();
var lastname = $( " #lastname " ).val();
if (firstname && lastname && ! this .value) {
this .value = firstname + " . " + lastname;
}
});
// code to hide topic selection, disable for demo
var newsletter = $( " #newsletter " );
// newsletter topics are optional, hide at first
var inital = newsletter.is( " :checked " );
var topics = $( " #newsletter_topics " )[inital ? " removeClass " : " addClass " ]( " gray " );
var topicInputs = topics.find( " input " ).attr( " disabled " , ! inital);
// show when newsletter is checked
newsletter.click( function () {
topics[ this .checked ? " removeClass " : " addClass " ]( " gray " );
topicInputs.attr( " disabled " , ! this .checked);
});
});
</ script >
< style type ="text/css" >
#commentForm { width : 500px ; }
#commentForm label { width : 250px ; }
#commentForm label.error, #commentForm input.submit { margin-left : 253px ; }
#signupForm { width : 670px ; }
#signupForm label.error {
margin-left : 10px ;
width : auto ;
display : inline ;
}
#newsletter_topics label.error {
display : none ;
margin-left : 103px ;
}
</ style >
</ head >
< body >
< h1 id ="banner" >< a href ="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" > jQuery Validation Plugin </ a > Demo </ h1 >
< div id ="main" >
< p > Default submitHandler is set to display an alert into of submitting the form </ p >
< form class ="cmxform" id ="commentForm" method ="get" action ="" >
< fieldset >
< legend > Please provide your name, email address (won't be published) and a comment </ legend >
< p >
< label for ="cname" > Name (required, at least 2 characters) </ label >
< input id ="cname" name ="name" class ="required" minlength ="2" />
< p >
< label for ="cemail" > E-Mail (required) </ label >
< input id ="cemail" name ="email" class ="required email" />
</ p >
< p >
< label for ="curl" > URL (optional) </ label >
< input id ="curl" name ="url" class ="url" value ="" />
</ p >
< p >
< label for ="ccomment" > Your comment (required) </ label >
< textarea id ="ccomment" name ="comment" class ="required" ></ textarea >
</ p >
< p >
< input class ="submit" type ="submit" value ="Submit" />
</ p >
</ fieldset >
</ form >
< form class ="cmxform" id ="signupForm" method ="get" action ="" >
< fieldset >
< legend > Validating a complete form </ legend >
< p >
< label for ="firstname" > Firstname </ label >
< input id ="firstname" name ="firstname" />
</ p >
< p >
< label for ="lastname" > Lastname </ label >
< input id ="lastname" name ="lastname" />
</ p >
< p >
< label for ="username" > Username </ label >
< input id ="username" name ="username" />
</ p >
< p >
< label for ="password" > Password </ label >
< input id ="password" name ="password" type ="password" />
</ p >
< p >
< label for ="confirm_password" > Confirm password </ label >
< input id ="confirm_password" name ="confirm_password" type ="password" />
</ p >
< p >
< label for ="email" > Email </ label >
< input id ="email" name ="email" />
</ p >
< p >
< label for ="agree" > Please agree to our policy </ label >
< input type ="checkbox" id ="agree" name ="agree" />
</ p >
< p >
< label for ="newsletter" > I'd like to receive the newsletter </ label >
< input type ="checkbox" id ="newsletter" name ="newsletter" />
</ p >
< fieldset id ="newsletter_topics" >
< legend > Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo </ legend >
< label for ="topic_marketflash" >
< input type ="checkbox" id ="topic_marketflash" value ="marketflash" name ="topic" />
Marketflash
</ label >
< label for ="topic_fuzz" >
< input type ="checkbox" id ="topic_fuzz" value ="fuzz" name ="topic" />
Latest fuzz
</ label >
< label for ="topic_digester" >
< input type ="checkbox" id ="topic_digester" value ="digester" name ="topic" />
Mailing list digester
</ label >
< label for ="topic" class ="error" > Please select at least two topics you'd like to receive. </ label >
</ fieldset >
< p >
< input class ="submit" type ="submit" value ="Submit" />
</ p >
</ fieldset >
</ form >
< h3 > Syntetic examples </ h3 >
< ul >
< li >< a href ="errorcontainer-demo.html" > Error message containers in action </ a ></ li >
< li >< a href ="custom-messages-metadata-demo.html" > Custom Messages as Metadata </ a ></ li >
< li >< a href ="radio-checkbox-select-demo.html" > Radio and checkbox buttons and selects </ a ></ li >
< li >< a href ="ajaxSubmit-intergration-demo.html" > Integration with Form Plugin (AJAX submit) </ a ></ li >
< li >< a href ="custom-methods-demo.html" > Custom methods and message display. </ a ></ li >
< li >< a href ="dynamic-totals.html" > Dynamic forms </ a ></ li >
</ ul >
< h3 > Real-world examples </ h3 >
< ul >
< li >< a href ="milk/" > Remember The Milk signup form </ a ></ li >
< li >< a href ="marketo/" > Marketo signup form </ a ></ li >
< li >< a href ="multipart/" > Buy and Sell a House multipart form </ a ></ li >
< li >< a href ="captcha/" > Remote captcha validation </ a ></ li >
</ ul >
< h3 > Testsuite </ h3 >
< ul >
< li >< a href ="../test/" > Validation Testsuite </ a ></ li >
</ ul >
</ div >
< script src ="http://www.google-analytics.com/urchin.js" type ="text/javascript" >
</ script >
< script type ="text/javascript" >
_uacct = " UA-2623402-1 " ;
urchinTracker();
</ script >
</ body >
</ html >
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
