[jquery] jquery validate表单验证插件的基本使用方法及功能拓展

1 表单验证的准备工作

1.点击表单项，显示帮助提示　

2.鼠标离开表单项时，开始校验元素　

3.鼠标离开后的正确、错误提示及鼠标移入时的帮助提醒

2 jquery validate插件实现表单验证的小例子

在引入jquery validate插件前，需要先引入它所依赖的文件jquery.js
在jquery.validate.extend.js文件中对jquery validate原有的功能进行了扩展，并修改了相关默认选项

<script src="jquery.js"></script>
<script src="lib/jquery.validate.min.js"></script>
<script src="lib/jquery.validate.extend.js"></script>
<script src="./jquery-validation/localization/messages_zh.min.js"></script>

2.1 表单html

  <form class="cmxform" id="login" method="get" action="">
    <fieldset>
      <legend>验证完整的表单</legend>
      <p>
        <label for="username">用户名</label>
        <input id="username" name="username" type="text">
      </p>
      <p>
        <label for="password">密码</label>
        <input id="password" name="password" type="text">
      </p>
      <p>
        <label for="confirm_password">验证密码</label>
        <input id="confirm_password" name="confirm_password" type="text">
      </p>
      <p>
        <label for="email">邮箱</label>
        <input id="email" name="email" type="text">
      </p>
      <p>
        <input class="submit" type="submit" value="提交">
      </p>
      <input type="reset">
    </fieldset>
  </form>

2.3 表单css

    input.error {
      border: 1px solid red;
    }

    label.error {
      padding-left: 16px;
      padding-bottom: 2px;
      font-weight: bold;
      color: red;
    }

    /* 必须是 input 标签, 并且需要有一个 type 属性, 值还得是 reset */
    input[type=reset] {
      color: red
    }

2.3 表单验证js逻辑

    // 对检验插件的扩展
    // 第一个参数, 是校验规则名称
    // 第二个参数, 校验的执行函数
    // 第三个参数, 检验失败的时候默认的提示文本
    $.validator.addMethod('gx', function (val, ele, param) {
      const reg = /^\w{6,12}@(qq|163)\.(com|cn)$/
      return reg.test(val)
    }, $.validator.format('您的邮箱不是 qq 或者 163 邮箱, 请更换后重试'))

    // 开始使用
    // 注意: 获取到 form 标签去调用 validate 方法
    const abc = $('#login').validate({
      // 表示该表单的验证规则
      rules: {
        // key 表示验证的是哪一个表单元素, 和表单元素的 name 属性对应
        // value 表示该表单需要遵循的规则
        username: 'required',
        // value 可以写成一个对象数据类型, 表示添加多条验证规则
        password: {
          // 必填
          required: true,
          // 最少6位
          minlength: 6,
          // 最多12位
          maxlength: 12
        },
        // 重复密码
        confirm_password: {
          required: true,
          // 表示填写的内容必须要和 #password 元素内容一致
          equalTo: "#password"
        },
        email: 'gx'
      },

      // 表示该表单的自定义提示文本
      messages: {
        // 内部的书写规则和 rules 是一样的
        username: '您还没有填写 用户名 呢 ^_^',
        password: {
          required: '您还没有填写 密码 呢 ^_^',
          minlength: '您的密码长度还不到 6 位哦, 很是不安全 ^_^',
          maxlength: '您的密码长度超过 12 为了, 请少写一点把, 我记不住'
        },
        confirm_password: {
          equalTo: '您两次输入的密码不一致, 我怕你记不住, 还是改一下吧'
        }
      },

      // 表单验证完毕的提交函数
      // 当你书写了这个函数的时候, 表单验证通过以后, 就不会执行自动提交了
      // 而是执行这个函数
      submitHandler: function (form) {
        // 形参接受的内容就是该表单元素
        console.log(form)

        // jquery 内有一个方法, 叫做 serialize, 专门从 form 标签内获取所有表单的内容
        // 能把表单中的所有内容自动获取出来, 并且组装成 查询字符串 格式
        const str = $(form).serialize()
        console.log(str)
      },

      // debug 模式开始
      // 只验证不提交
      // 表示表单不会执行自动提交, 但是依旧会执行 submitHandler 函数
      // debug: true

      // 忽略不验证元素
      // ignore: '#username'
    })

    // 重置表单
    $('input[type=reset]').click(function () {
      abc.resetForm()
    })

---

参考：
jquery validate表单验证插件的基本使用方法及功能拓展