jquery-validation插件文档

jQuery-validation

特性

  • 动态添加和移除规则
  • 自定义验证方法
  • 多语言支持(37种)
  • 远程验证
  • 对单个元素验证
  • 对整个表单进行验证
  • 重置整个表单

通过这个文档,了解validation plugin 使用

html

<form class="cmxform" id="commentForm" method="get" action="">  
  <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <p>
      <label for="cname">Name (required, at least 2 characters)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (optional)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">Your comment (required)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>  

js

$("#commentForm").validate();

method(方法): 是实现元素验证的逻辑

rule(规则): 验证规则关联element和method,比如input的name "primary-mail" methods"required" 和 "email"

Plugin methods(插件方法)

validate() 验证整个表单所有字段

valid() – 验证选择表单是否有效

rules() – 读取元素规则,也可以动态添加和移除

Custom selectors(自定义的选择器)

这个库也可以扩展jquery的选择器的方法

:blank – 选择全部空值的元素

:filled – 选择全部已经填充值的元素

:unchecked – 选择未选中的元素

Validator(验证器)

validate method 返回的是验证器对象,它包含几个公共的方法,你可以使用它触发验证表单

Validator.form() – 验证表单

Validator.element() – 验证单个元素

Validator.resetForm() – 重置整个表单

Validator.showErrors() – 展示特定的提示

Validator.numberOfInvalids() – 返回无效的字段值

验证器对象上的静态方法

jQuery.validator.addMethod() – 添加自定义的验证方法

jQuery.validator.format() – 使用参数替换占位符

jQuery.validator.setDefaults() – 修改默认设置

jQuery.validator.addClassRules() – 为规则添加class

内置验证方法列表

required – 必填

remote – 请求远程资源验证元素

minlength – 给定定字符串最小长度

maxlength – 给定字符串最大长度

rangelength – 给定字符串值的范围

min – 给定数值的最小值

max – 给定数值最大值

range – 给定数值的范围

step

email – 电子邮件

url – URL

date – 日期

dateISO国际化标准日期

number – 必须是浮点数

digits – 只能是数字

equalTo – 和另一个元素一样

accept

creditcard – 必须是信用卡数字长度

extension – 必须是指定文件扩展名

phoneUS – 验证美国电话号码

require_from_group – 确定一个组的字段已经完成

可以到github查找带更多附加的方法

使用 $.validator.methods property 自定义规则

当你的name属性像user[name]这样时,请确认你name是否使用了双引号,更加详细查看手册

常见问题

这段代码有太多的递归,$(form).submit()回调submitHandler,会进入无限递归,使用form.submit()代替 $(form).submit()

 $("#myform").validate({
  submitHandler: function(form) {
    // some other code
    // maybe disabling submit button
    // then:
    $(form).submit();
  }
 });

下面是正确代码

 $("#myform").validate({
  submitHandler: function(form) {
    form.submit();
  }
 });

Demos

The Marketo sign-up form The Marketo sign-up form, 第二步 - 自定义展示消息 - 远程验证电子邮件 - 自定义方法检查密码

The Remember The Milk sign-up form

多表单示例

你的欣赏是我最大的动力

Yanxiong Huang

My name is Yanxiong Huang. graduated from Nanyang middle school.Love Linux,familiar with Node.js,Docker,Serverless... and more Web technology.Contact Me:QQ 31356617;Email:huangaynxiong2013@gmail.com

guangzhou,china http://www.myfreax.com

乐在分享