表单验证插件jquery.validate.js

最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件—-Validation。Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评。作为一个标准的验证方法库,Validation拥有如下特点:

1.内置验证规则: 拥有必填、数字、Email、URL和信用卡号码等19类内置验证规则

2.自定义验证规则: 可以很方便地自定义验证规则

3.简单强大的验证信息提示: 默认了验证信息提示,并提供自定义覆盖默认的提示信息的功能

4.实时验证: 可能通过keyup或blur事件触发验证,而不仅仅在表单提交的时候验证

validate.js下载地址: http://plugins.jquery.com/project/validate

metadata.js下载地址: http://plugins.jquery.com/project/metadata

Read More

jquery.validate和onsubmit()同时使用的方法

最近写了点前端代码,验证form表单的时候用到了jquery validate。这个东西很好用,具体的使用方法就不必啰嗦了。

这个东西主要是用来验证表单数据的格式,有时候虽然格式正确了但是还要保证某些字段的唯一性,就要另外判断了,我用的方法是在form加一个onsubmit事件。

测试的时候发现,只要满足validate验证的格式,onsubmit的判断会被忽略掉。事实上,jquery validate也是在submit的时候开始判断的,并且在onsubmit事件之后,所以onsubmit返回false,只要满足validate的条件仍然会返回true,表单仍被提交。不仅如此,我在script脚本中的submi()在validate验证后会自动执行,也就是说,即使验证不通过,表单仍然可以通过submit()函数自动提交。

这个时候就需要在构造validate规则的时候加上submitHandler。

Read More

jquery.validate自定义验证--成功提示与择要提示

  1. 自定义验证–成功提示

1) 添加选项

1
2
3
4
5
6
7
8
9
10
11
12
errorClass: "unchecked"
validClass: "checked"
errorElement: "span"
errorPlacement: function (errorelement) {
ifelement.parent().find("span[for=""" + element.attr("id") + """]") != null) {
element.parent().find("span[for=""" + element.attr("id") + """]".remove();
}
error.appendTo(element.parent());
},
success: function (label) {
label.removeClass("unchecked").addClass("checked");
},

Read More