jquery vilidate 使用小例

本文介绍了一个使用jQuery Validate插件进行管理员信息更新验证的例子,包括如何验证昵称、账号及角色选择,并通过Ajax提交数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 

				// 修改
				$("#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:  

 

<!-- jQuery -->
<script charset="utf-8" src="/js/jquery.min.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><!-- 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>
<!-- Validate Alert -->
<script charset="utf-8" src="/js/livedemo.js"></script>
<script charset="utf-8" src="/js/flavr.min.js"></script>

 

 

 

 

 

 

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值