jQuery常用UI插件：
| 名称 | 网址 | 说明 |
|---|---|---|
| jQuery UI | http://jQueryui.com/ | jQuery UI是以jQuery为基础的开源JavaScript网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件 |
| jQuery easyUI | http://www.jeasyui.com/ | easyUI是基于jQuery的用户界面插件集合。easyUI为创建现代化、互动、JavaScript应用程序，提供必要的功能。easyUI不需要写很多代码，只需通过编写一些简单HTML标记，就可以定义用户界面。easyUI是完美支持HTML5网页的完整框架 |
| jQuery LigerUI | http://ligerui.googlecode.com | jQuery LigerUI是基于jQuery的一系列UI控件组合，简单又强大，致力于快速打造Web前端界面解决方案。因为是前端控件，跟服务器无关，可以适合.NET、JSP、PHP等Web服务器环境。目前全部插件的打包压缩JavaScript文件只有100KB左右，很轻巧 |
移动应用开发：jQuery Mobile，不仅给主流移动平台带来jQuery核心库，且提供一个完整统一的jQuery移动UI框架。
对话框插件：AsyncBox对话框插件，提供模拟了alert、confirm、prompt、open和一些扩展对话框。lhgDialog是一个功能强大且兼容面广的对话框组件，拥有精致的界面与友好接口。
表单验证插件：jQuery formValidator表单验证插件，它是基于jQuery类库，实现了JavaScript脚本与页面html代码的分离。可以划分多个校验组，每个组的校验都是互不影响的。对一个表单对象，只需要写一行代码就可以轻松实现无数种（理论上）表单验证。
表格插件：DataTables是一个jQuery的表格插件。是一个高度灵活的工具，支持任何HTML表格。Tablesorter是一个用来直接在浏览器上对表格数据进行排序的jQuery插件，无需再次刷新页面，支持多种单元格数据类型，如数值、字符串、日期和自定义排序。
日期控件：Pickadate完全响应式和轻量级的jQuery日期输入选择器。
jQuery Validation插件：检查表单所有必需字段已经填充并符合特定的需求。
Validation插件所需常见验证：
| 验证规则 | 说明 |
| required | 必填 |
| date | 信息必须是MM/DD/YYYY格式。如10/30/2018有效，10-30-2018无效 |
| email地址格式 | |
| number | 必须是数值 |
| digits | 只能包含正整数 |
| url | 必须是完整、有效的Web地址 |
| creditcard | 必须是格式有效的信用卡 |
| minlength | 字段必须包含指定的最少数目的字符 |
| maxlength | 字段必须包含不多于指定数目的字符 |
| rangelength | 指定了一个字段中允许的最小字符和最大字符数 |
| min | 要求字段包含一个数值并且等于或大于指定的数值 |
| max | 指定字段可以包含的最大值 |
| range | 指定字段必须包含的最小和最大值 |
| equalTo | 要求一个字段内容匹配其他字段，如密码确认equalTo:'#password' |
验证：
html标签通过class验证，title修改提示信息
不改变字段的html，通过validate()函数传递一个对象字面量设置选项，其中包含每个选项的单独对像
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Validation插件使用示例</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.validate.js"></script>
</head>
<body>
<form id="menu">
用户名<input name="name" /><br/>
密码<input name="password" id="password" /><br/>
确认密码<input name="confirm_password" id="confirmPassword" /><br/>
出生日期<input name="birthday" class="required date" title="出生日期 必填"/><br/>
性别<input type="radio" name="sex"><span>男</span><input type="radio" name="sex" ><span>女</span><label id="errorSex"></label><br/>
描述<input name="info" class="required" /><label for="info" generated="true" class="error">该字段必填</label><br />
<button >提交</button>
</form>
</body>
</html>
<script>
$("#menu").validate({
rules:{//属性设置
name:'required',
password:{
required:true,
rangelength:[8,16]
},
confirm_password:{
equalTo:'#password'
},
sex:{
required:true
}
},
messages:{//错误信息提示设置
password:{
required:"必须输入密码",
rangelength:"数字长度在8到16"
},
confirm_password:{
equalTo:"密码不匹配"
},
sex:{
required:"性别必选"
}
},
errorPlacement:function(error,element){//确定错误信息的位置
if(element.is(":radio") || element.is(":checkbox")) {
error.appendTo($("#errorSex"));
}
else{
error.insertAfter(element);
}
}
});
</script>
783
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
