前端手册

小明的学习圈子

前端手册

前端组件

若依封装了一些常用的JS组件方法。

名称代码介绍
表格$.table表格封装处理
表格树$.treeTable表格树封装处理
表单$.form表单封装处理
弹出层$.modal弹出层封装处理
操作$.operate操作封装处理
校验$.validate校验封装处理
树插件$.tree树插件封装处理
通用方法$.common通用方法封装处理

通用方法

表格方法

方法参数介绍
$.table.init();options(选项参数)初始化表格参数
$.table.search();formId(表单ID, 表格ID, 追加数据)搜索-默认第一个form
$.table.exportExcel();formId(表单ID)导出-默认第一个form
$.table.importExcel();formId(表单ID)导入-默认importForm
$.table.importTemplate();formId(表单ID)模板下载
$.table.refresh();刷新表格
$.table.selectColumns();column(查询列值)查询表格指定列值
$.table.selectFirstColumns();查询表格首列值
$.table.destroy();tableId(表格ID)销毁表格-默认options.id
$.table.serialNumber();index(序号)序列号生成
$.table.dropdownToggle();value(内容)下拉按钮切换
$.table.imageView();value(内容), height, width, target(打开方式)图片预览
$.table.showColumn();column(列值), tablbeId(表格ID)显示表格指定列
$.table.hideColumn();column(列值), tablbeId(表格ID)隐藏表格指定列
$.table.showAllColumns();tableId(表格ID)显示所有表格列
$.table.hideAllColumns();tableId(表格ID)隐藏所有表格列
$.table.tooltip();value(内容), length(截取长度), target(显示方式)超出指定长度浮动提示
$.table.selectDictLabel();datas(字典列表), value(当前值)回显数据字典
$.treeTable.init();options(选项参数)初始化表格树参数
$.treeTable.search();formId(表单ID)搜索-默认第一个form
$.treeTable.refresh();刷新表格树

表单方法

方法参数介绍
$.form.reset();formId(表单ID, 表格ID)表单重置
$.form.selectCheckeds();name(name名称)获取选中复选框项
$.form.selectSelects();name(id名称)获取选中下拉框项

弹层方法

方法参数介绍
$.modal.icontype(图标类型)显示图标
$.modal.msgcontent(内容), type(图标类型)消息提示
$.modal.msgError();content(内容)错误消息
$.modal.msgSuccess();content(内容)成功消息
$.modal.msgWarning();content(内容)警告消息
$.modal.alertcontent(内容), type(图标类型)消息提示
$.modal.alertError();content(内容)错误提示
$.modal.alertSuccess();content(内容)成功提示
$.modal.alertWarning();content(内容)警告提示
$.modal.msgReloadmsg(消息), type(图标类型)消息提示,重新加载页面
$.modal.msgSuccessReloadmsg(消息)消息提示成功并刷新父窗体
$.modal.close();关闭窗体
$.modal.closeAll关闭全部窗体
$.modal.confirm();content(内容), callBack(回调函数)确认窗体
$.modal.open();title, url, width, height, callBack(回调函数)弹出层指定宽度
$.modal.openOptions();options(选项参数)弹出层指定参数选项
$.modal.openFull();title, url, width, height弹出层全屏
$.modal.openTab();title(标题), url(地址)选卡页方式打开
$.modal.parentTab();title(标题), url(地址)选卡页同一页签打开
$.modal.closeTab();dataId(地址)关闭选项卡
$.modal.disable禁用按钮
$.modal.enable启用按钮
$.modal.loading();message(提示消息)打开遮罩层
$.modal.closeLoading();关闭遮罩层
$.modal.reload();重新加载

操作方法

方法参数介绍
$.operate.submit();url, type, dataType, data, callback(回调函数)提交数据
$.operate.post();url(地址), data(数据), callback(回调函数)post方式请求提交数据
$.operate.get();url(地址), callback(回调函数)get请求传输数据
$.operate.detail();id(数据ID)详细信息
$.operate.remove();id(数据ID)删除信息
$.operate.removeAll();批量删除信息
$.operate.clean();清空信息
$.operate.add();id(数据ID)添加信息
$.operate.addTab();id(数据ID)添加信息(选项卡方式)
$.operate.addFull();id(数据ID)添加信息 全屏
$.operate.addUrl();id(数据ID)添加访问地址
$.operate.edit();id(数据ID)修改信息
$.operate.editTab();id(数据ID)修改信息(选项卡方式)
$.operate.editFull();id(数据ID)修改信息 全屏
$.operate.editUrl();id(数据ID)修改访问地址
$.operate.save();url(地址), data(数据), callback(回调函数)保存信息
$.operate.saveModal();url(地址), data(数据), callback(回调函数)保存信息 弹出结果提示框
$.operate.saveTab();url(地址), data(数据), callback(回调函数)保存选项卡信息
$.operate.ajaxSuccess();result(返回结果)保存结果弹出msg刷新table表格
$.operate.saveReload();result(返回结果)保存结果重新加载页面
$.operate.successCallback();result(返回结果)成功回调执行事件(静默更新)
$.operate.successTabCallback();result(返回结果)选项卡成功回调执行事件(静默更新)
$.validate.unique();value(返回标识)判断返回标识是否唯一
$.validate.form();formId(表单ID)表单验证-默认第一个form
$.validate.reset();formId(表单ID)重置表单验证(清除提示信息)

通用方法

方法参数介绍
$.tree.init();options(选项参数)初始化树结构
$.tree.searchNode();搜索节点
$.tree.selectByIdName();treeId, treeName, node根据Id和Name选中指定节点
$.tree.showAllNode();nodes(全部节点数据)显示所有节点
$.tree.hideAllNode();nodes(全部节点数据)隐藏所有节点
$.tree.showParent();treeNode(节点数据)显示所有父节点
$.tree.showChildren();treeNode(节点数据)显示所有孩子节点
$.tree.updateNodes();nodeList(全部节点数据)更新节点状态
$.tree.getCheckedNodes();column(列值)获取当前被勾选集合
$.tree.notAllowParents();_tree(树对象)不允许根父节点选择
$.tree.toggleSearch();隐藏/显示搜索栏
$.tree.collapse();树折叠
$.tree.expand();树展开
$.common.isEmpty();value(值)判断字符串是否为空
$.common.isNotEmpty();value(值)判断一个字符串是否为非空串
$.common.nullToStr();value(值)空对象转字符串
$.common.visible();value(值)是否显示数据 为空默认为显示
$.common.trim();value(值)空格截取
$.common.equals();str(比较值1), that(比较值2)比较两个字符串(大小写敏感)
$.common.equalsIgnoreCase();str(比较值1), that(比较值2)比较两个字符串(大小写不敏感)
$.common.split();str(值), sep(分隔符), maxLen(最大长度)将字符串按指定字符分割
$.common.sprintf();str(值)字符串格式化(%s )
$.common.dateFormat();date(日期), format(日期格式)日期格式化(yyyy-MM-dd HH-mm-ss)
$.common.getItemField();item(数据), field(属性)获取节点数据,支持多层级访问
$.common.random();min(最小), max(最大)指定随机数返回
$.common.startWith();value(值), start(开始值)判断字符串是否是以start开头
$.common.endWith();value(值), end(结束值)判断字符串是否是以end结尾
$.common.uniqueFn();array(数组)数组去重
$.common.join();array(数组), separator(分隔符)数组中的所有元素放入一个字符串
$.common.formToJSON();formId(表单ID)获取form下所有的字段并转换为json对象
$.common.dictToSelect();datas(字典数据), value(值), name(属性名)数据字典转下拉框
$.common.getLength();obj(对象)获取obj对象长度
$.common.isMobile();判断移动端
$.common.numValid();text(值)数字正则表达式,只能为0-9数字
$.common.enValid();text(值)英文正则表达式,只能为a-z和A-Z字母
$.common.enNumValid();text(值)英文、数字正则表达式,必须包含(字母,数字)
$.common.charValid();text(值)英文、数字、特殊字符正则表达式,必须包含(字母,数字,特殊字符!@#$%^&*()-=_+)

表格使用

表格组件基于bootstrap-tableopen in new window组件进行封装,轻松实现数据表格。

  • 表格初始化方法 $.table.init

表的各项

参数类型默认值描述
urlStringNull请求后台的URL
uniqueIdStringNull指定唯一列属性 配合删除/修改使用 未指定则使用表格行首列
createUrlStringNull新增URL 配合使用 $.operate.add(),$.operate.addTab()
updateUrlStringNull修改URL 配合使用 $.operate.edit(),$.operate.editTab()
removeUrlStringNull删除URL 配合使用 $.operate.remove()
exportUrlStringNull导出URL 配合使用 $.table.exportExcel()
importUrlStringNull导入URL 配合使用 $.table.importExcel()
detailUrlStringNull详细URL 配合使用 $.operate.detail()
cleanUrlStringNull清空URL 配合使用 $.operate.clean()
importTemplateUrlStringNull模板URL 配合使用 $.table.importTemplate()
heightStringundefined表格的高度
stripedStringfalse是否显示行间隔色
sortNameStringNull排序列名称
sortOrderStringNull排序方式 asc 或者 desc
paginationBooleantrue默认为true表格的底部工具栏会显示分页条,设为false不显示
paginationLoopBooleanfalse默认为true不启用分页条无限循环的功能
pageSizeint10每页的记录行数(*)
pageListArray[10, 25, 50]可供选择的每页的行数
idStringbootstrap-table表格ID属性
toolbarStringtoolbar表格工具栏ID属性
escapeBooleanfalse是否转义HTML字符串
firstLoadBooleantrue是否首次请求加载数据,对于数据较大可以配置false
showFooterBooleanfalse默认为false隐藏表尾,设为true显示
sidePaginationStringserverserver启用服务端分页client客户端分页
searchBooleantrue默认为true显示搜索框功能,设为false隐藏
searchTextString''搜索框初始显示的内容,需要启用search设为true
showSearchBooleantrue默认为true显示检索信息,设为false隐藏
showPageGoBooleanfalse默认为false不显示跳转页,设为true显示
showRefreshBooleantrue默认为true显示刷新按钮,设为false隐藏
showColumnsBooleantrue默认为true显示某列下拉菜单,设为false隐藏
showToggleBooleantrue默认为true显示视图切换按钮,设为false隐藏
showExportBooleantrue默认为true显示导出文件按钮,设为false隐藏
showPrintBooleantrue默认为true显示打印页面按钮,设为false隐藏
showHeaderBooleantrue默认为true显示表头,设为false隐藏
showFullscreenBooleanfalse默认为false不全屏显示,设为true全屏显示
clickToSelectBooleanfalse默认为false不启用点击选中行,设为true启用
singleSelectBooleanfalse是否单选checkbox
mobileResponsiveBooleantrue是否支持移动端适配
cardViewBooleanfalse是否启用显示卡片视图
detailViewBooleanfalse是否启用显示细节视图
onCheckFunctiononCheck(row, $element)当选择此行时触发
onUncheckFunctiononUncheck(row, $element)当取消此行时触发
onCheckAllFunctiononCheckAll(rowsAfter, rowsBefore)当全选行时触发
onUncheckAllFunctiononUncheckAll(rowsAfter, rowsBefore)当取消全选行时触发
onClickRowFunctiononClickRow(row, $element)点击某行触发的事件
onDblClickRowFunctiononDblClickRow(row, $element)双击某行触发的事件
onClickCellFunctiononClickCell(field, value, row, $element)单击某格触发的事件
onDblClickCellFunctiononDblClickCell(field, value, row, $element)双击某格触发的事件
onEditableSaveFunctiononEditableSave(field, row, oldValue, $el)行内编辑保存的事件
onExpandRowFunctiononExpandRow(index, row, $detail)点击详细视图的事件
onPostBodyFunctiononPostBody(data)渲染完成后执行的事件
maintainSelectedBooleanfalse默认为false前端翻页时不保留所选行,设为true启用
rememberSelectedBooleanfalse默认为false不启用翻页记住前面的选择,设为true启用
fixedColumnsBooleanfalse默认为false禁用冻结列,设为true启用冻结列(左侧)
fixedNumberint0冻结列的个数,当fixedColumns设为true有效(左侧)
fixedRightNumberint0冻结列的个数,当fixedColumns设为true有效(右侧)
onReorderRowFunctiononReorderRow: function (data)当拖拽结束后处理函数
rowStyleFunctionrowStyle(row, index)改变某行的格式,需要两个参数:row行的数据index行的索引
footerStyleFunctionfooterStyle(column)通过自定义函数设置页脚样式
headerStyleFunctionheaderStyle(column)通过自定义函数设置标题样式
paramsArrayNull当请求数据时,你可以通过修改queryParams向服务器发送参数
columnsArrayNull默认空数组,在JS里面定义 参考列的各项(Column options )
dataArray[]默认空数组,被加载的数据
responseHandlerobjectresponseHandler(res)在加载服务器发送来的数据之前,处理数据的格式
onLoadSuccessobjectonLoadSuccess(data)当所有数据被加载时触发处理函数
exportOptionsobjectignoreColumn: [0, 8]前端导出设置ignoreColumn忽略列索引如[0,5,10]
exportDataTypeString'all'导出方式(默认all:导出所有数据;all:导出当前页的数据;selected:导出选中的数据)
exportTypesArray['csv', 'txt', 'doc', 'excel']导出文件类型 (json、xml、png、csv、txt、sql、doc、excel、xlsx、powerpoint、pdf)
printPageBuilderFunctionprintPageBuilder(table)自定义打印页面模板
detailFormatterFunction(index, row, element)detailView设为true,启用了显示detail view。用于格式化细节视图

列的各项

参数类型默认值描述
radioBooleanfalse默认false不显示radio(单选按钮),设为true则显示,radio宽度是固定的
checkboxBooleanfalse默认false不显示checkbox(复选框),设为true则显示,checkbox的每列宽度已固定
fieldStringNull是每列的字段名,不是表头所显示的名字,通过这个字段名可以给其赋值,相当于key,表内唯一
titleStringNull这个是表头所显示的名字,不唯一,如果你喜欢,可以把所有表头都设为相同的名字
titleTooltipStringtrue当悬浮在某控件上,出现提示 - 参考 Bootstrap 提示工具(Tooltip)插件
classbooleanfalse表格列样式
rowspanNumbertrue每格所占的行数
colspanNumbertrue每格所占的列数
alignStringtrue每格内数据的对齐方式,有:left(靠左)、right(靠右)、center(居中)
halignStringtruetable header(表头)的对齐方式,有:left(靠左)、right(靠右)、center(居中)
falignStringtruetable footer(表脚,的对齐方式,有:left(靠左)、right(靠右)、center(居中)
valignStringtrue每格数据的对齐方式,有:top(靠上)、middle(居中)、bottom(靠下)
widthNumberNull每列的宽度。如果没有自定义宽度自适应
widthUnitStringpx定义用于选项的单位,例如%
sortableBooleanfalse默认false就默认显示,设为true则会被排序
orderStringasc默认的排序方式为"asc(升序)",也可以设为"desc(降序)"。
visibleBooleantrue默认为true显示该列,设为false则隐藏该列
ignoreBooleanfalse默认为false该列可见,设为true则不可见,列选项也消失了
cardVisibleBooleantrue默认为true显示该列,设为false则隐藏。
switchableBooleantrue默认为true显示该列,设为false则禁用列项目的选项卡。
clickToSelectBooleantrue默认true不响应,设为false则当点击此行的某处时,不会自动选中此行的checkbox(复选框)或radiobox(单选按钮)
formatterFunctionNull某格的数据转换函数,需要三个参数: -value: field(字段名) -row:行的数据 -index:行的(索引)index
footerFormatterFunctionNull某格的数据转换函数,需要一个参数: -data: 所有行数据的数组 函数需要返回(return)footer某格内所要显示的字符串的格式
eventsObjectNull当某格使用formatter函数时,事件监听会响应,需要四个参数: -event:-value:字段名 -row:行数据 -index:此行的index
sorterFunctionNull自定义的排序函数,实现本地排序,需要两个参数: - a:第一个字段名 - b:第二个字段名
sortNameStringNull排序列名称
cellStyleFunctionNull对某列中显示样式改变
searchableBooleantrue默认true,表示此列数据可被查询
searchFormatterBooleantrue默认true,可使用格式化的数据查询
escapeBooleanfalse是否转义HTML字符串

使用方法

  • 表单搜索 $.table.search
<a onclick="$.table.search();">搜索</a>
  • 表格数据导出 $.table.exportExcel
<a onclick="$.table.exportExcel();">导出</a>
  • 数据模板下载 $.table.importTemplate
<a onclick="$.table.importTemplate();">下载模板</a>
  • 表格数据导入 $.table.importExcel
<a onclick="$.table.importExcel();">导入</a>
<form id="importForm" enctype="multipart/form-data" class="mt20 mb10" style="display: none;">
	<div class="col-xs-offset-1">
		<input type="file" id="file" name="file"/>
		<div class="mt10 pt5">
			<input type="checkbox" id="updateSupport" name="updateSupport" title="如果登录账户已经存在,更新这条数据。"> 是否更新已经存在的用户数据
			 &nbsp;	<a onclick="$.table.importTemplate()" class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i> 下载模板</a>
		</div>
		<font color="red" class="pull-left mt10">
			提示:仅允许导入“xls”或“xlsx”格式文件!
		</font>
	</div>
</form>
  • 表格销毁 $.table.destroy
<a onclick="$.table.destroy();">销毁</a>
  • 表格数据刷新 $.table.refresh
<a onclick="$.table.refresh();">刷新</a>
  • 选择表格行具体列 $.table.selectColumns
var loginName = $.table.selectColumns("loginName");
  • 选择表格行首列 $.table.selectFirstColumns
var firstColumn = $.table.selectFirstColumns();
  • 显示表格特定的列 $.table.showColumn
$.table.showColumn("userName");
  • 隐藏表格特定的列 $.table.hideColumn
$.table.hideColumn("userName");
  • 序列号生成 $.table.serialNumber
{
	title: "序号",
	formatter: function (value, row, index) {
		return $.table.serialNumber(index);
	}
},



 


  • 超出指定长度浮动提示(单击文本可复制) $.table.tooltip
{
	field: 'remark',
	title: '备注',
	align: 'center',
	formatter: function(value, row, index) {
		return $.table.tooltip(value);
	}
},





 


  • 回显数据字典 $.table.selectDictLabel
var datas = [[${@dict.getType('sys_common_status')}]];
{
	field: 'status',
	title: '用户状态',
	align: 'center',
	formatter: function(value, row, index) {
		return $.table.selectDictLabel(datas, value);
	}
},






 


  • 新增回显数据字典(字符串数组) $.table.selectDictLabels
var datas = [[${@dict.getType('sys_common_status')}]];
{
	field: 'status',
	title: '用户状态',
	align: 'center',
	formatter: function(value, row, index) {
		return $.table.selectDictLabels(datas, value);
	}
},






 


  • 下拉按钮切换 $.table.dropdownToggle
formatter: function(value, row, index) {
	var actions = [];
	actions.push('<a class="' + editFlag + '" href="#" onclick="$.operate.edit(\'' + row.deptId + '\')"><i class="fa fa-edit"></i>编辑</a>');
	actions.push('<a class="' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.deptId + '\')"><i class="fa fa-trash"></i>删除</a>');
	actions.push('<a class="' + addFlag + '" href="#" onclick="$.operate.add(\'' + row.deptId + '\')"><i class="fa fa-plus"></i>添加下级部门</a>');
	return $.table.dropdownToggle(actions.join(''));
}





 

  • 图片预览 $.table.imageView
{
	field: 'avatar',
	title: '用户头像',
	formatter: function(value, row, index) {
		return $.table.imageView(value);
	}
},




 


弹层使用

弹层组件目前基于layer组件进行封装,提供了弹出、消息、提示、确认、遮罩处理等功能。

  • 提供成功、警告和错误等反馈信息
$.modal.msg("默认反馈");
$.modal.msgError("错误反馈");
$.modal.msgSuccess("成功反馈");
$.modal.msgWarning("警告反馈");
  • 提供成功、警告和错误等提示信息
$.modal.alert("默认提示");
$.modal.alertError("错误提示");
$.modal.alertSuccess("成功提示");
$.modal.alertWarning("警告提示");
$.modal.confirm("确认信息", function() {});
  • 提供弹出层信息
// 弹出窗体 title 标题 url 请求链接 width 宽度 height 高度 callback 回调函数
$.modal.open(title, url, width, height, callback);

// 选卡页方式打开 title 标题 url 请求链接 
$.modal.openTab(title, url);

// 选卡页方式打开并刷新当前页 isRefresh 是否刷新
$.modal.openTab(title, url, true);

// 选卡页同一页签打开
$.modal.parentTab(title, url);

// 弹出窗体 自定义 options 选项
$.modal.openOptions(options);

// 全屏弹出窗体
$.modal.openFull(title, url, width, height);

// 关闭窗体 index 当前层索引
$.modal.close(index);

// 关闭全部窗体
$.modal.closeAll();

// 关闭选项卡
$.modal.closeTab(dataId);

// 重新加载
$.modal.reload();
  • 提供遮罩层信息
// 打开遮罩层
$.modal.loading("正在导出数据,请稍后...");

// 关闭遮罩层
$.modal.closeLoading();

权限使用

使用thymeleaf模板整合了shiro标签,界面可以直接shiro:xxxx(此处简单介绍几个,更多请参考thymeleaf-extras-shiroopen in new window

<!-- 角色权限 -->
<a href="#" shiro:hasRole="admin">管理员才能看到</a>
<a href="#" shiro:lacksRole="admin">验证用户是否不具备某角色</a>
<a href="#" shiro:hasAllRoles="admin,common">验证用户是否具有以下多个角色</a>
<a href="#" shiro:hasAnyRoles="admin,common">验证用户是否具有以下任意一个角色</a>
<!-- 资源权限 -->
<a href="#" shiro:hasPermission="system:user:add">包含权限字符串才能看到</a>
<a href="#" shiro:lacksPermission="system:user:add">验证用户是否不具备某权限</a>
<a href="#" shiro:hasAllPermissions="system:user:add,system:user:edit">验证用户是否具有以下多个权限</a>
<a href="#" shiro:hasAnyPermissions="system:user:add,system:user:edit">验证用户是否具有以下任意一个权限</a>

如果需要在JS中使用权限,使用封装方法

// 验证用户是否具备某权限
var permission = [[${@permission.hasPermi('system:user:add')}]];
// 验证用户是否不具备某权限
var permission = [[${@permission.lacksPermi('system:user:add')}]];
// 验证用户是否具有以下任意一个权限
var permission = [[${@permission.hasAnyPermi('system:user:add,system:user:edit')}]];
// 验证用户是否具备某角色
var role = [[${@permission.hasRole('admin')}]];
// 验证用户是否不具备某角色
var role = [[${@permission.lacksRole('admin')}]];
// 验证用用户是否具有以下任意一个角色
var role = [[${@permission.hasAnyRoles('admin,common')}]];
// 验证用户是否认证通过或已记住的用户
var isLogin = [[${@permission.isUser()}]];

// 追加标识可以实现隐藏
<a class="btn btn-success btn-xs ' + permission + '">包含权限字符串才能看到</a>
<a class="btn btn-danger btn-xs ' + role + '">管理员才能看到</a>

字典使用

配置好相关的数据字典信息即可正常使用(系统管理-字典管理)

<select name="status" th:with="type=${@dict.getType('sys_normal_disable')}">
  <option value="">所有</option>
  <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}">
  </option>
</select>
<label class="col-sm-2 control-label">回显数据字典值:</label>
<div class="form-control-static" th:text="${@dict.getLabel('sys_normal_disable', status)}">
</div>

如果在想Table表格数据使用字典,使用formatter格式化

// 获取数据字典数据
var datas = [[${@dict.getType('sys_normal_disable')}]];

// 格式化数据字典
formatter: function(value, row, index) {
	return $.table.selectDictLabel(datas, value);
}

参数使用

配置好相关的参数信息即可正常使用(系统管理-参数管理)

<body th:classappend="${@config.getKey('sys.index.skinName')}">

如果需要在JS中使用参数,使用封装方法

var skinName = [[${@config.getKey('sys.index.skinName')}]];
$("#id").val(skinName);

图标使用

项目默认使用了Font AwesomeGlyphicons字体图标。

Font Awesome 默认图标示例代码 @/demo/icon/fontawesome.htmlopen in new window
Glyphicons 默认图标示例代码 @/demo/icon/glyphicons.htmlopen in new window

两者都可以在项目中任意地方使用。

Font Awesome 使用方式

<!-- class 为 fontawesome 图标的名字 -->
<i class="fa fa-music"></i>

Glyphicons 使用方式

<!-- class 为 glyphicons 图标的名字 -->
<i class="glyphicon glyphicon-music"></i>

表单校验

jQuery Validate插件提供了强大的表单验证功能,能够让客户端表单验证变得更简单,同时它还提供了大量的可定制化选项,以满足应用程序的各种需求。该插件捆绑了一套非常有用的验证方法,包括 URL 和电子邮件验证,同时也提供了API允许用户自定义校验方法。

使用方式:$("#id").validate({});

// 全部校验
$("#form-xxx").validate().form();

// 清空校验
$("#form-xxx").validate().resetForm();

// 单个校验
$("#form-xxx").validate().element($("#xxx"))

默认校验规则

校验规则类型说明
requiredBoolean必输字段
remoteJsonString
emailBoolean必须输入正确格式的电子邮件
urlBoolean必须输入正确格式的网址
dateBoolean必须输入正确格式的日期
dateISOBoolean必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
numberBoolean必须输入合法的数字(负数,小数)
digitsBoolean必须输入整数
creditcardBoolean必须输入合法的信用卡号
equalTo:"#field"Selector输入值必须和#field相同
acceptString输入拥有合法后缀名的字符串(上传文件的后缀)
maxlength:5Number输入长度最多是5的字符串(汉字算一个字符)
minlength:10Number输入长度最小是10的字符串(汉字算一个字符)
rangelength:[5,10]Array输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
range:[5,10]Array输入值必须介于 5 和 10 之间
step:5Number输入值 5 的整数倍值
max:5Number输入值不能大于5
min:10Number输入值不能小于10
isPhoneBoolean必须输入正确格式的手机号
isTelBoolean必须输入正确格式的座机号码
isNameBoolean姓名只能用汉字
isUserNameBoolean必须输入数字或者字母,不包含特殊字符
isIdentityBoolean必须输入正确格式的身份证号码
isBirthBoolean必须输入正确格式的出生日期
isIpBoolean必须输入正确格式的IP地址
notEqual:xxxxString不允许为输入值
gt:10Number必须大于输入值

自定义校验规则

本文介绍Validate自定义表单校验方式。Validate插件虽然提供了丰富的验证规则,但在很多时候仍然很难满足我们的开发需求,在注册页面我们需要通过ajax验证用户输入的用户名是否已经被他人注册,那此时通过传统的Validate验证方式已经无法满足需求了! 我们可以通过自定义验证方法实现这个需求。

例如加一个区号的验证。

1、在jquery.validate.extend.js加入自定义规则

// 地区号码验证
jQuery.validator.addMethod("ac", function (value, element) {
	var ac = /^0\d{2,3}$/;
	return this.optional(element) || (ac.test(value));
}, "区号如:010或0371");

2、然后rules中使用ac: true

rules: {
    areaCode:{
        ac: true,
    },
}

出现如下图表示自定义区号验证成功。 validate

使用tooltip提示错误信息

unhighlight表示element验证正确时触发,errorPlacement表示element验证错误时触发。

unhighlight: function(element, errorClass, validClass) {
	$(element).tooltip('destroy').removeClass(errorClass);
},
errorPlacement: function(error, element) {
	if ($(element).next("div").hasClass("tooltip")) {
		$(element).attr("data-original-title", $(error).text()).tooltip("show");
	} else {
		$(element).attr("title", $(error).text()).tooltip("show");
	}
},
Last Updated 2023/11/21 21:24:34