阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      jquery.validate 表单提供了强大的验证功能

      表单验证:jquery.validate,在做表单验证的时候经常使用;

      参考网站:http://www.runoob.com/jquery/jquery-plugin-validate.html

      参考 DEMO:http://www.runoob.com/try/try.php?filename=jquery-plugin-errorcontainer

      默认校验规则:

      • required: true 值是必须的。
      • required: “#aa:checked” 表达式的值为真,则需要验证。
      • required: function(){} 返回为真,表示需要验证。
      • 后边两种常用于,表单中需要同时填或不填的元素。

      校验的规则:

      Debug

      $helpUserReplaceDiaForm.validate({debug:true})//只验证,不提交
      
      如果多个页面都需要调多个表单
      
      $.validator.setDefaults({
          debug: true
      })
      

      备注:写模块的时候,这么用,发现设置 Debug 无效(表单提交是通过 submitHandler 提交)

      errorPlacement:更改错误信息显示的位置;

      validate 方法返回一个 Validator 对象,validator 对象有很多方法可以用来引发校验程序或者改变 form 的内容;下面是常用的方法

      验证函数 DEMO 如下:

      formValidate:function(){
          $helpUserReplaceDiaForm.validate({
          rules: {
              qrcode: {
                  required: true
                  },
              linkman: {
                  required: true
              },
              mobile: {
                  required: true,
              },
              district_code: {
                  required: true
              },
              address: {
                  required: true
              },
              reason: {
                  required: true,
              }
          },
          messages: {
              qrcode: {
                  required: "请填写或者扫描设备二维码"
              },
              linkman: {
                  required: "请填写联系人"
              },
              mobile: {
                  required: "请填写联系电话"
              },
              district_code: {
                  required: "请选择所属区域"
              },
              address: {
                  required: "请填写详细地址"
              },
              reason: {
                  required: "请填写换货原因"
              }
          },
          errorPlacement: function (error, el) { //更改错误信息显示的位置处理
              var msg = error.html(),
                  $p = el.closest('div.wui-form-item');
              if ($p.length == 0) {
                  $p = el.closest('div.wui-form-itemother')
              }
      
              var $explain = $p.children('.wui-form-explain');
              if (msg !== '') {
                  if ($explain.length == 0) {
                      $explain = $('<p class="wui-form-explain wui-tiptext"></p>');
                      $explain.appendTo($p);
                  }
                  $explain.html('<i class="iconfont">&#xe611;</i>' + msg);
                  $p.addClass('wui-form-item-error');
              } else {
                  $explain.remove();
                  //$explain.html('');
                  $p.removeClass('wui-form-item-error');
              }
          },
          success: function (label) { //成功
          },
          submitHandler: function (fm) { //验证通过后,保存数据
              console.log("验证通过");
          }
          })
      },
      

      自定义验证规则如下:

          $.validator.addMethod("isQrcode", function (value, element) {
          var qrcode = $.trim(value);
              if (!qrcode) {
          return false;
              }
          });
      

      可以做一些验证是否是 URL,是否是手机号,是否身份证等验证;

      • 表单填充:jquery.formautofill
      • 参考网站:https://github.com/creative-area/jQuery-form-autofill
      • 参考 DEMO:http://labs.creative-area.net/jquery.formautofill/doc/

      优点是,获取服务端返回的数据时候,可以自动识别 name 或者 ID 来填充数据;

      如果是用户填写的数值,弹窗新窗口让用户确认数据的时候,这个时候并不适合用(如果用的话,需要在确认页面,对应项目设置 ID,插件配置 findbyname: false,获取用户输入的值,保存在对象中,对象的 key 值对应 ID;)

      目录
      目录