`
k19421
  • 浏览: 70829 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

JQuery Validator自定义错误样式及CSS校验(动态元素)

    博客分类:
  • js
阅读更多

对jQuery validator也不熟,使用的时候碰到两个问题,列下来,做一个记录

这两个官方文档里面都介绍了的

1、原生的错误样式跟系统的样式不太搭,要自定义一个错误的样式

官方参考文档

$(".selector").validate({
  errorClass: "invalid"
});

 就给他指定了一个叫做invalid的错误样式

 

2、动态创建的元素,他的名称是动态的,怎么给他添加校验规则

这时候,可以给动态创建的元素一个CSS,然后自定义一个CSS的校验规则

官方参考文档

//1、创建一个自定义的校验规则
jQuery.validator.addMethod("discount", function(value, element) {   
	 var tel = /^(\d(\.\d{1,2})?|10|10.0|10.00)$/;
	 return this.optional(element) || (tel.test(value));
 }, "必填字段,不可大于10,可精确到小数点后两位");

 //2、创建一个CSS校验规则,在里面使用上面创建的这个规则
 jQuery.validator.addClassRules("discount", {
	required: true,
	discount: true
});

//3、在动态创建元素的时候给他一个discount样式
<input type="text" leaseTerm="'+days+'" name="days_'+days+'" value="" class="form-control input-sm discount" placeholder="">

 

分享到:
评论

相关推荐

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

    下面是一段示例代码,展示了如何通过jQuery选择器和CSS样式来改变错误提示的位置: ```javascript if (box.attr("tipBottom")) { tip.css({ display: "block", left: box.offset().left, top: box.offset().top...

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

    5. **自定义消息**:使用`messages`选项自定义错误提示,使用户体验更友好。 6. **样式调整**:通过CSS定制密码强度指示器的样式,使其与网站设计协调一致。 总的来说,`jQuery Validate`的这个实例提供了一个实用...

    BootstrapValidator-0.5.3表单验证

    在实际开发中,你可能需要结合使用jQuery或者其他的JavaScript库来操作表单元素。同时,记得在HTML中为每个需要验证的输入字段添加`data-bv-*`属性,以便BootstrapValidator识别并应用相应的验证规则。 总的来说,...

    jQuery formValidator代码生成器

    - **错误消息显示**:设置错误消息显示的位置和样式,可以是错误消息元素或使用CSS控制。 5. **优化与扩展** - **性能优化**:合理使用异步验证,避免阻塞用户交互,以及延迟验证以提升用户体验。 - **扩展功能*...

    jQuery的表单校验插件validate

    4. **动态添加/删除元素验证**:当动态增删表单元素时,需要使用`.removeError()`, `.element()`, `.valid()`等方法来同步验证状态。 5. **国际化**:`validate`插件支持多语言,可以设置`language`属性切换语言包...

    jquery 表单校验的插件formValidator4.01

    7. **错误提示样式**:可以自定义错误提示样式,与网站整体风格保持一致,提升用户体验。 **二、使用步骤** 1. **引入资源**:首先在HTML文件中引入jQuery库和FormValidator的JS与CSS文件。 2. **初始化插件**:...

    jQuery校验

    4. **自定义错误消息**:通过设置`messages`选项来自定义错误提示。 ```javascript $('form').validate({ messages: { email: '请输入有效的电子邮件地址' } }); ``` 5. **自定义验证方法**:可以使用`.add...

    jquery validate 信息气泡提示

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

    java使用jquery_validate插件实现文本校验

    通常还需要引入对应的CSS文件来美化错误提示样式。 2. **配置验证规则**:在JavaScript代码中,通过`.validate()`方法初始化验证器,并设置验证规则。例如,为一个ID为`username`的输入字段设置非空和长度限制: ...

    jQuery带Tips动画提示通用表单验证插件下载(jquery validate),动画效果漂亮

    3. 提示样式:通过`errorClass`自定义错误元素的样式,使用户更容易识别错误。 总结,jQuery Validate插件以其简洁的API和强大的功能,成为了Web开发中实现表单验证的首选工具。结合自定义验证规则和提示动画,我们...

    jQuery表单验证插件应用

    通过上述内容,我们可以看出jQuery表单验证插件不仅提供了丰富的基本校验功能,还支持高度定制化的扩展,如自定义错误信息展示、Ajax远程校验等。这使得它成为前端表单验证的理想选择之一。掌握这些技能能够帮助...

    功能强大的jquery.validate表单验证插件

    CSS样式设置是为了给表单元素提供默认的初始样式,并在表单元素触发事件时改变样式,以给出视觉反馈,例如当输入内容不符合要求时,可以通过CSS突出显示错误信息。 表单元素获得焦点时,jquery.validate插件可以...

    bootstrap校验表单js css

    BootstrapValidator是一款强大的...这些文件通常包括Bootstrap的基础样式库、jQuery库(因为BootstrapValidator依赖于jQuery)以及BootstrapValidator自身的JS和CSS文件。例如,你可以将以下代码添加到部分: ```html ...

    Bootstrap实现登录校验表单(带验证码)

    2. `bootstrapValidator.min.css`:这是用于表单验证的第三方库Bootstrap Validator的CSS文件,它提供了美观的验证样式。 3. `jquery-2.1.4.min.js`:jQuery库,用于简化DOM操作和事件处理。 4. `bootstrap.min.js`...

    bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码

    7. **依赖库**: 示例代码中引入了jQuery、Bootstrap CSS和JS,以及BootstrapValidator的CSS和JS。这些都是运行BootstrapValidator所必需的。 8. **事件监听**: BootstrapValidator提供了一系列事件,如`valid`、`...

    JQuery实行数据验证

    7. **使用Bootstrap或其他CSS框架**:若项目使用Bootstrap或其他CSS框架,可以调整Validation Plugin的样式以匹配现有的设计。 总之,jQuery结合Validation Plugin提供了强大的表单验证功能,使开发者能够轻松创建...

    jquery对textarea的长度进行验证

    要实现对textarea长度的验证,我们首先需要在HTML中引入jQuery和`jquery.validate.js`库,以及相关的CSS样式文件,确保页面可以正确解析和执行验证逻辑。 接下来,我们需要创建一个textarea元素,并为其添加一个...

    BootStrapValidator校验方式

    在页面中,你需要找到要进行验证的表单元素,然后使用jQuery选择器获取其ID,并调用BootstrapValidator方法进行初始化。初始化时,需要设置验证规则和提示信息。例如: ```javascript $('#formId').bootstrap...

    jQuery插件EasyUI校验规则 validatebox验证框

    在HTML页面中,需要先引入EasyUI的相关JavaScript和CSS文件,然后在页面的标签内编写自定义的JavaScript函数,扩展validatebox的校验规则,并确保在表单元素中使用validatebox,并通过指定规则来触发校验功能。...

    JQuery表单验证

    - **初始化验证**:在表单元素加载后,通过`$("#myForm").validate({ options })`来启动验证,其中`options`包含设置如`rules`(定义验证规则)、`messages`(自定义错误消息)等。 - **自定义规则**:可以扩展`...

Global site tag (gtag.js) - Google Analytics