下载地址
官网下载地址：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‘]{ width: 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="width: 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="width: 100px" size="10"></select> ???????????</td> ???????</tr> ???</table></body></html>
jQuery插件-validate
原文地址：https://www.cnblogs.com/xinruyi/p/9410690.html