jquery validate 校验

前言

最近在开发过程中使用到了前端校验，所以呢就用到了jquery validate ，该插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。当然你也可以自己写自定义提示这些下面都会讲到。那么废话不多说上图上代码。

一、下载使用

官网：https://jqueryvalidation.org/

在官网中提供了相关的文档以及下载地址以及cdn等等等等

下载地址：https://github.com/jquery-validation/jquery-validation/releases/tag/1.19.0

以下cdn仅供参考具体参考官网的即可

当然呢引入 validate的前提呢是你得有jQuery如果没有那么就需要引入jQuery，否则呢你也是跑不起来的。

二、使用

以下是官方提供的默认的校验规则

在js中声明（声明的js中rules与表单的name一一对应）

$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
    rules: {
      firstname: "required",
      lastname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    //这里的message我要说一下因为官方提供的默认是英文提示如果你想换为你自己的术话就这么写
    messages: {
      firstname: "请输入您的名字",
      lastname: "请输入您的姓氏",
      username: {
        required: "请输入用户名",
        minlength: "用户名必需由两个字母组成"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母"
      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母",
        equalTo: "两次密码输入不一致"
      },
      email: "请输入一个正确的邮箱",
      agree: "请接受我们的声明",
      topic: "请选择两个主题"
     }
    })
});

栗子表单

<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <legend>验证完整的表单</legend>
    <p>
      <label for="firstname">名字</label>
      <input id="firstname" name="firstname" type="text">
    </p>
    <p>
      <label for="lastname">姓氏</label>
      <input id="lastname" name="lastname" type="text">
    </p>
    <p>
      <label for="username">用户名</label>
      <input id="username" name="username" type="text">
    </p>
    <p>
      <label for="password">密码</label>
      <input id="password" name="password" type="password">
    </p>
    <p>
      <label for="confirm_password">验证密码</label>
      <input id="confirm_password" name="confirm_password" type="password">
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="email" type="email">
    </p>
    <p>
      <label for="agree">请同意我们的声明</label>
      <input type="checkbox" class="checkbox" id="agree" name="agree">
    </p>
    <p>
      <label for="newsletter">我乐意接收新信息</label>
      <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
    </p>
    <fieldset id="newsletter_topics">
      <label for="topic_marketflash">
        <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">Marketflash
      </label>
      <label for="topic_fuzz">
        <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">Latest fuzz
      </label>
      <label for="topic_digester">
        <input type="checkbox" id="topic_digester" value="digester" name="topic">Mailing list digester
      </label>
      <label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
    </fieldset>
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>

提交验证以下截图为官网的翻译版本（那么大家就可在提交表单的时候做验证了）

下面有人就会问如果我在关闭页面后再次点击不想验证了呢？（就是初始化页面重置表单呗）以上情况多出现在一个页面多个弹层，就是我们平时说的弹框。别担心官网提供了这个方法（看下图）

 

这么做呢就会重置某个表单，那么下面又有人问了如果我们某个控件在某种情况是必填的某种情况是非必填的怎么做呢？

别担心官方提供了动态加入移除的方法。

我比较懒这个是官方的截图大家感兴趣的呢可以去官网看

三、自定义校验

写了这么多又有人问了如果我想自定义或者做异步校验呢？那么就有了以下的自定义校验和远程校验了。

自定义校验如下

// 邮政编码验证   
jQuery.validator.addMethod("isZipCode", function(value, element) {   
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");


 $("#signupForm").validate({
    rules: {
      email: {
        required: true,
        isZipCode: true//只需要在这里加入他就可以用了
      }
    }
   
    });

远程校验如下（这个是我实际使用的截图请求的后台也是java的当然只要支持ajax都是可以使用的）：

后台接收参数 

 

以上就是jQuery Validate校验的全部内容写的不是特别好如果大家有什么问题可以在下方留言欢迎指正与交流！