jquery.validate用法示例

最新推荐文章于 2024-03-14 07:00:00 发布

最新推荐文章于 2024-03-14 07:00:00 发布 · 371 阅读

文章标签：

#jquery.validate

jQuery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用jQuery Validate插件进行表单验证的具体配置案例，包括如何设置验证规则、错误提示信息、高亮样式等，并实现了表单提交前及重置按钮的功能。

 var validator = $('#add-menu-form').validate({
	errorElement: 'div',
	errorClass: 'help-block',
	rules: {	//定义验证规则
		name: {	//input输入框的name属性
			required: true,	//必选字段
			minlength: 5,	//最小长度5个字符(一个汉字算一个字符)
			remote: {	//后台判断
				url: "sysMenu/judgeName",     //后台处理程序，只能返回true或false
				type: "post",               //数据发送方式
				dataType: "json",           //接受数据格式   
				data: {                     //要传递的数据
					username: function() {
						return $("#name").val();
					}
				}
			}
		},
		href: {
			required: true
		},
		imageUrl: {
			required: true
		}
	},
						
	messages: {	//错误的提示信息
		name: {
			required: "请输入模块名称",
			remote: "模块名称已经存在"
		},
	href: "请输入动作名称",
		imageUrl: "请输入图标路径"
	},
				
	highlight: function (e) {
		$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
	},
				
	success: function (e) {
		$(e).closest('.form-group').removeClass('has-error').addClass('has-info');
		$(e).remove();
	},
				
	errorPlacement: function (error, element) {	//错误显示位置
				
		error.appendTo(element.parent());	//显示在输入框右侧
							
	},
				
	submitHandler: function (form) {	//表单提交时处理
	},
	invalidHandler: function (form) {	//验证时处理		
	}
});
				
$(":reset").click(function() {
	validator.resetForm();	//点击重置按钮时，重置验证的错误信息
});