官网下载地址：http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip
帮助文档位置：http://jqueryvalidation.org/documentation/
菜鸟网地址： http://www.runoob.com/jquery/jquery-plugin-validate.html
导入jquery文件；
导入jquery.validate.js文件；
在页面加载完成后，确定对哪个表单进行校验，校验方法为jq表单.validate();
配置校验规则和提示信息；
【需求】：
使用jQuery的validate插件实现一个简单的表单验证：
用户名不能为空；
密码是4-6位；
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #form1 input.error { border: solid 1px red; } #form1 label.error { margin-left: 10px; color: red; } </style> </head> <body style="margin: 50px;"> <form id="form1" action="#" method="get"> <table> <tr> <td>用户名</td> <td><input type="text" name="username" id="username" /></td> </tr> <tr> <td>密码</td> <td><input type="password" name="password" id="password" /></td> </tr> <tr> <td></td> <td><input type="submit" value="提交" /></td> </tr> </table> </form> </body> <script src="js/jquery-3.3.1.js"></script> <script src="js/jquery.validate.js"></script> <script type="text/javascript"> $("#form1").validate( { rules:{ username:{required:true}, password:{required:true,minlength:4,maxlength:6} }, messages:{ username:{required:"用户名必填"}, password:{ required:"密码不能为空", minlength:"密码的最小长度为4", maxlength:"密码的最大长度为6" } } } ) </script> </html>
左右选中案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" http-equiv="content-type" content="text/html"> <title>左右选中</title> <style> input[type='button']{ 50px;} </style> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript"> $( function(){ /*右移操作*/ //全部右移 $("#toRight3").click(function(){$("#left option").appendTo($("#right")); }); //选中的右移 $("#toRight2").click(function(){$("#left option:selected").appendTo($("#right"));}); //选中的第一个右移 $("#toRight1").click(function(){$("#left option:selected:first").appendTo($("#right"));}); /*----------------------------------------------------------------------------------------*/ /*左移操作*/ //全部左移 $("#toLeft3").click(function () {$("#right option").appendTo($("#left"));}); //选中的左移 $("#toLeft2").click(function () {$("#right option:selected").appendTo($("#left"));}); //选中的第一个左移 $("#toLeft1").click(function () {$("#right option:selected:first").appendTo($("#left"));}); } ); </script> </head> <body> <table> <tr> <td> <select id="left" multiple="true" style=" 100px" size="10"> <option>生</option> <option>活</option> <option>不</option> <option>易</option> </select> </td> <td> <input type="button" value=">" id="toRight1"> <br> <input type="button" value=">>" id="toRight2"> <br> <input type="button" value=">>>" id="toRight3"> <br><br> <input type="button" value="<" id="toLeft1"> <br> <input type="button" value="<<" id="toLeft2"> <br> <input type="button" value="<<<" id="toLeft3"> </td> <td> <select id="right" multiple="multiple" style=" 100px" size="10"></select> </td> </tr> </table> </body> </html>
