jquery vilidate 使用小例

最新推荐文章于 2019-02-13 17:43:47 发布

微风--轻许--

最新推荐文章于 2019-02-13 17:43:47 发布

阅读量693

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/jiangyu1013/article/details/56014730

前端专栏收录该内容

69 篇文章

订阅专栏

本文介绍了一个使用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>

效果类似于：（以上代码和以下效果不是同一个页面验证，但效果就是这种）