`

jQuery validate 自定义样式、规则

 
阅读更多
jquery validate 常用的找Api 就好, 但有一些需要自己扩展,比如规则、样式:

1. 自定义规则:
jQuery.validator.addMethod("test", function(value, element) {       
    return this.optional(element) || 1==1);       
 }, "错误提示");   

$('#submitForm').validate({   
     rules: {   
        testAttr: {   
            required:true,   
            stringCheck:true,   
            test:[]   
         }
     },
     message:{
       required:"必填",
       test:"测试"
     }
});


2.自定义样式:
模拟easy ui 自定义样式


input.error {
	background: url("images/validatebox_warning.png") no-repeat scroll right 1px #FFFFEE;
	border: 1px solid red; 
}

重写错误提示 js:
$.validator.setDefaults({
	showErrors: function(map, list) {
		// there's probably a way to simplify this
		/*var focussed = document.activeElement;
		if (focussed && $(focussed).is("input, textarea")) {
		$(this.currentForm).tooltip("close", { currentTarget: focussed }, true);
		}*/
		this.currentElements.removeAttr("title").removeClass("ui-state-highlight").removeClass("error");
		
		$.each(list, function(index, error) {
			$(error.element)
				.attr("title", error.message).addClass("ui-state-highlight").addClass("error");
			$(error.element).tooltip({
				openn:true,
				 position: {
					 my: "left top",
					 at: "right+5 top-5"
					 }
				 });
			//$(error.element).after('<div class="validatebox-tip" style="display:block;left:164px;top:165px;"><span class="validatebox-tip-content" >test<span></div>');
		});
		/*if (focussed && $(focussed).is("input, textarea")) {
			$(this.currentForm).tooltip("open", { target: focussed });
		}*/
	}
});







  • 大小: 4.3 KB
分享到:
评论

相关推荐

    jquery validate 验证自定义样式

    首先,我们从标题"jquery validate 验证自定义样式"开始。jQuery Validate插件默认提供了一些基本的样式,但这些样式可能不能满足所有设计需求。开发者通常需要根据项目的需求或品牌风格来定制验证的显示效果。这...

    jquery validate默认错误提示显示位置修改

    jQuery Validate插件是实现表单验证功能的一个强大工具,它提供了丰富的验证规则和自定义选项。然而,默认情况下,jQuery Validate插示错误提示的位置可能并不符合所有项目的需求。本文将详细介绍如何修改jQuery ...

    jquery validate的漂亮css样式验证

    `jQuery Validate`结合自定义CSS样式,可以让表单验证既实用又美观,提供更好的用户体验。 在"jquery validate的漂亮css样式验证"这个主题中,我们主要关注的是如何将`jQuery Validate`与CSS样式相结合,以创建一个...

    jquery validate 信息气泡提示

    PoshyTip 是一个基于 jQuery 的高质量提示插件,它提供了多种样式和自定义选项,可以创建美观、动态的提示效果。在上述描述中,开发者提到要利用 PoshyTip 来增强 jQuery Validate 的错误提示功能。当表单验证未通过...

    jquery validate 自动绑定校验规则

    此外,通过自定义样式和错误提示位置,可以提升用户体验。 7. **最佳实践** 使用`jQuery Validate`时,推荐遵循以下最佳实践: - 只对需要验证的字段添加规则,避免不必要的计算和DOM操作。 - 避免在验证规则中...

    JQuery Validate插件的验证规则和例子,合成AJAX

    自定义样式 为了呈现更友好的用户体验,可以自定义错误消息的显示方式。jQuery Validate插件提供了一些选项,如`errorElement`(错误元素类型)、`errorClass`(错误元素类名)和`errorPlacement`(错误消息放置...

    jquery validate依赖包及其帮助文档.rar

    《jQuery Validate插件详解与应用指南》 在Web开发领域,表单验证是不可或缺的一环,它能够确保用户输入的数据符合预设的规则,从而提高数据的准确性和系统的稳定性。jQuery Validate是一个强大的JavaScript库,专...

    Jquery Validate修改版

    《jQuery Validate修改版:提升表单验证体验》 在网页开发中,用户输入的验证是不可或缺的一环,它能够确保用户提交的数据符合预期,避免无效数据的产生,从而提高用户体验和服务器端处理效率。jQuery Validate插件...

    Jquery validate和form插件

    首先,使用 `jQuery validate` 配置表单验证规则,然后在验证通过后,利用 `jQuery form` 的 `submitHandler` 回调函数来发起 AJAX 请求。这样可以确保只有符合验证规则的数据才会被提交,同时保持页面的无刷新特性...

    jquery.validate表单验证密码完整例子(带密码强度显示)

    首先,`jQuery Validate`的核心功能是验证用户在表单中输入的数据,确保其符合预设的验证规则。例如,我们可以设定密码必须包含字母、数字、特殊字符等要求,以提高安全性。在提供的例子中,它会检查用户输入的密码...

    jquery validate poshytip 自定义样式

    在本文中,我们将深入探讨如何在jQuery Validate插件中结合Poshytip创建自定义样式的气泡提示。jQuery Validate是一个非常流行的JavaScript库,用于验证HTML表单中的输入数据,而Poshytip则是一个轻量级的jQuery插件...

    jQuery validate框架的个性化验证

    jQuery Validate 提供了许多预设的验证规则,如 `required`(必填项)、`email`(电子邮件格式)、`url`(URL格式)、`number`(数字)等。这些规则可以通过 `rules` 属性附加到表单元素上: ```javascript $('#...

    jquery validate (弹框)

    在`jQuery Validate`的使用中,`formValidator.2.5.2\css\template.css`文件通常包含了样式定义,用于定制验证错误提示的外观。描述中提到“不要引入”可能是因为这个特定的样式文件与用户的项目样式冲突,或者用户...

    jquery validate中文教程

    除了这些基本选项,jQuery Validate还支持许多其他的验证规则,如`required`、`email`、`url`、`minlength`、`maxlength`等,并可以通过`messages`选项自定义错误提示。此外,还可以使用`highlight`、`unhighlight`...

    jquery validate验证示例

    当用户尝试提交表单时,如果输入不符合规则,`jQuery Validate` 会阻止表单提交并显示相应的错误消息。 此外,还可以通过 `.addMethod()` 添加自定义验证方法,或者通过 `.rules('add')` 在运行时动态添加验证规则...

    jQuery插件Validate实现自定义表单验证

    在本文中,我们将深入探讨如何使用jQuery Validate插件实现自定义表单验证,特别是如何自定义一个验证方法。 首先,要使用jQuery Validate插件,你需要在页面中引入jQuery库以及jQuery Validate插件的JavaScript...

    Jquery Validate跟bootstrap插件的兼容

    为了解决这个问题,我们需要自定义jQuery Validate的错误消息样式,使其与Bootstrap的样式相匹配。例如,可以设置错误消息的class为Bootstrap的`.help-block`或`.alert`类。 2. **错误元素的插入位置**:jQuery ...

    jQuery Validate表单验证插件实现代码

    jQuery Validate提供了多种内置的验证规则,如`required`(必填)、`number`(数字)、`email`(电子邮件地址)、`url`(网址)和`creditcard`(信用卡号)。这些规则可以直接应用到表单元素上,无需额外编写验证...

    jQuery Validate

    `jQuery Validate`允许你定义自定义验证规则和错误消息。例如,要求必填字段,你可以这样设置: ```javascript rules: { name: "required", }, messages: { name: "请输入您的姓名", } ``` ### 4. 验证事件与回...

Global site tag (gtag.js) - Google Analytics