Jquery插件validate实现表单验证

jquery插件validate介绍

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

validate的导入

这里我使用的是cdn引入，就避免的去网上下载js到本地

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.1/jquery.validate.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.1/localization/messages_zh.js"></script>

**解释：**第三个是汉化的错误提示

制作表单

html:

<form class="myform" id="myform" action="#">
  <fieldset>
    <legend>请完善你的表单</legend>
    <p class="p">
      <input class="txt" disabled type="button" value="用  户  名"/>
      <input class="info" type="text" id="username" name="username" placeholder="请输入用户名" required>
    </p>
    <p class="p">
      <input class="txt" disabled type="button" value="设置密码"/>
      <input class="info" type="password" id="password" name="password"   placeholder="建议至少使用两种字符组合" required>
    </p>
    <p class="p">
      <input class="txt" disabled type="button" value="确认密码"/>
      <input class="info" type="password" id="repress" name="repress" placeholder="请再次输入密码" required>
    </p>
    <p class="p">
      <input class="txt" disabled type="button" value="中国0086"/>
      <input class="info tph" type="tel" name="phone" pattern="^1\d{10}$" placeholder="建议使用常用手机" required>
    </p>
    <p class="p">
      <input class="txt" disabled type="button" value="验  证  码"/>
      <input class="info codeText" type="text" name="code" placeholder="请输入验证码" required/>
      <span class="code">HCf6</span>
    </p>
    <p class="read">
      <input type="checkbox" name="checkbox" required/>
      <span>阅读并同意</span>
      <span>《京东用户注册协议》  《隐私政策》</span>
    </p>
    <p class="login_box">
      <input class="login" type="submit" value="立 即 注 册"/>
    </p>
  </fieldset>
</form>

css:

  <style>
    .myform {
      width: 600px;
      margin: 50px auto 0;
    }
    .p {
      border: 1px #cecece solid;
      /*width: 360px;*/
      width: 480px;
      margin: 0 auto 20px;
    }
    .txt {
      height: 36px;
      width: 80px;
      background-color: white;
      box-sizing: content-box;
      vertical-align: text-bottom;
      border: none;
    }
    .info {
      box-sizing: content-box;
      border: none;
      height: 36px;
      font-size: 12px;
      vertical-align: text-bottom;
      width: 200px;
      margin-left: -10px;
      padding-left: 10px;
    }
    .code {
      display: inline-block;
      float: right;
      height: 39px;
      width: 80px;
      background-color: black;
      color: white;
      text-align: center;
      line-height: 39px;
    }
    .login_box {
      border: none;
      width: 360px;
      margin: 0 auto;
    }
    .login {
      width: 360px;
      height: 36px;
      background-color: #ff3829;
      border: none;
      color: white;
    }
    .read{
      width: 400px;
      margin: 0 auto 20px;
    }
    .read span:nth-of-type(1){
      font-size: 14px;
    }
    .read span:nth-of-type(2){
      font-size: 11px;
      color: blue;
    }
    .error{
      color:red;
    }
  </style>

效果图：

注意：本次的验证码没有实现，只保证了其不能为空

插件使用格式：

具体为：

rules:{
            username: {
              required: true
            },
            password: {
              required: true,
              rangelength:[8,20]
            },
            repress: {
              required: true,
              rangelength:[8,20],
              equalTo: "#password"
            },
            phone: {
              required: true,
              phone: true
            },
            code: {
              required: true,
            },
            checkbox: 'required'
          },
           messages:{
            username: {
              required: "请输入用户名"
            },
            password: {
              required: "请输入密码",
              rangelength:"密码长度必须是8到20位"
            },
            repress: {
              required: "请再次输入密码",
              rangelength:"密码长度必须是8到20位",
              equalTo: "两次输入的密码不一致"
            },
            phone: {
              required: '请填写手机号码'
            },
            code: {
              required: "请输入验证码",
            },
            checkbox:{
              required:  "请同意该协议"
            }
          }

另外：可以使用自定义的验证校验
可以查看具体用法：菜鸟教程

 // 手机号码验证
      jQuery.validator.addMethod("phone", function(value, element) {
        let length = value.length;
        let mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
        return this.optional(element) || (length == 11 && mobile.test(value));
      }, "请填写正确的手机号码");

最终的效果：