前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jquery vilidate 使用小例

jquery vilidate 使用小例

作者头像
微风-- 轻许--
发布2022-04-13 09:06:31
3260
发布2022-04-13 09:06:31
举报
文章被收录于专栏:java 微风
代码语言:javascript
复制
				// 修改
				$("#updForm").validate({
			    	submitHandler:function(form){
			    		new $.flavr({ 
							content : '是否确认修改管理员?',
			                dialog : 'confirm', 
			                onConfirm : function() {
			                	$.ajax({
								  	url : "/system/doAuthAdminUpd",
									type : "post",
									data : { "id" : $("#updAuthId").val(),
										     "name" : $("input[name=updName]").val(),
										     "account" : $("input[name=updAccount]").val(),
										     "roleIds" : $("select[name=updRoleIds]").val().toString() },
									success : function(result) {
										if (result.status == 200) {
											$.tooltip(result.msg, true); // 显示提示
											$('#updTable').modal('hide'); // 隐藏表单
											myTable.ajax.url('/system/getAuthAdminList').load(); //重新加载
										} else {
											$.tooltip(result.msg, false);
										}
									}
								});
			                }
			            });
			    	},
					debug:false,
					rules:{
						updName:{required:true,maxlength:10},
						updAccount:{required:true,maxlength:20,isNumberAndLetter:true,
							remote:{
								url:"/system/checkAuthAdminAccount",
								type:"get",
								data:{
									account:function(){										
										return $("input[name=updAccount]").val().trim();
									}
								}
						}},
						updRoleIds:{required:true}
					},
					messages:{
						updName:{required:"请输入昵称",maxlength:$.validator.format("长度不能大于{0}个字符")},
						updAccount:{required:"请输入帐号",maxlength:$.validator.format("长度不能大于{0}个字符"),remote:"管理员帐号已存在"},
						updRoleIds:{required:"请选择角色"}
					},
					errorPlacement:function(error,element){
						layer.tips(error.text(),element,{tips:1,time:2000,tipsMore:true});
					}
				});
			})// 修改
				$("#updForm").validate({
			    	submitHandler:function(form){
			    		new $.flavr({ 
							content : '是否确认修改管理员?',
			                dialog : 'confirm', 
			                onConfirm : function() {
			                	$.ajax({
								  	url : "/system/doAuthAdminUpd",
									type : "post",
									data : { "id" : $("#updAuthId").val(),
										     "name" : $("input[name=updName]").val(),
										     "account" : $("input[name=updAccount]").val(),
										     "roleIds" : $("select[name=updRoleIds]").val().toString() },
									success : function(result) {
										if (result.status == 200) {
											$.tooltip(result.msg, true); // 显示提示
											$('#updTable').modal('hide'); // 隐藏表单
											myTable.ajax.url('/system/getAuthAdminList').load(); //重新加载
										} else {
											$.tooltip(result.msg, false);
										}
									}
								});
			                }
			            });
			    	},
					debug:false,
					rules:{
						updName:{required:true,maxlength:10},
						updAccount:{required:true,maxlength:20,isNumberAndLetter:true,
							remote:{
								url:"/system/checkAuthAdminAccount",
								type:"get",
								data:{
									account:function(){										
										return $("input[name=updAccount]").val().trim();
									}
								}
						}},
						updRoleIds:{required:true}
					},
					messages:{
						updName:{required:"请输入昵称",maxlength:$.validator.format("长度不能大于{0}个字符")},
						updAccount:{required:"请输入帐号",maxlength:$.validator.format("长度不能大于{0}个字符"),remote:"管理员帐号已存在"},
						updRoleIds:{required:"请选择角色"}
					},
					errorPlacement:function(error,element){
						layer.tips(error.text(),element,{tips:1,time:2000,tipsMore:true});
					}
				});
			})

引用的js:

代码语言:javascript
复制
<!-- jQuery -->
<script charset="utf-8" src="/js/jquery.min.js"></script>
代码语言:javascript
复制
		<!-- jQuery Validate -->
		<script charset="utf-8" src="/js/jquery.validate-1.13.1.min.js"></script>
		<script charset="utf-8" src="/js/additional-methods.js"></script><!-- jQuery Validate -->
		<script charset="utf-8" src="/js/jquery.validate-1.13.1.min.js"></script>
		<script charset="utf-8" src="/js/additional-methods.js"></script>
代码语言:javascript
复制
<!-- Validate Alert -->
<script charset="utf-8" src="/js/livedemo.js"></script>
<script charset="utf-8" src="/js/flavr.min.js"></script>

效果类似于:(以上代码和以下效果不是同一个页面验证,但效果就是这种)

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017/02/20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档