jQuery Validate 表单远程校验

jQuery Validate

这是一个做表单验证的jQuery插件，在SPA、data-binding大行其道的今天，使用的人可能不多了，但是在做一些server side rendering的项目中，使用jQuery Validate来做校验还是十分方便的。本文不是要全面的介绍jQuery Validate这个插件，而是讲解在使用此插件的远程校验时遇到的坑。

jQuery Validate的校验规则中提供了一个remote的选项，利用改选项我们可以通过AJAX调用后台的接口验证当前的输入，这个在诸如用户名唯一性和号码合法性的校验中非常实用。

方法配置

实际上remote是调用jQuery的ajax方法，所以它接受与$.ajax()相同的配置，

它可以接受url地址作为配置：

$('#myForm').validate({
  rules: {
    required: true,
    email: true,
    remote: "check-email.php"
  }
})

它也可以接受一个对象作为配置：

$( "#myForm" ).validate({
  rules: {
    email: {
      required: true,
      email: true,
      remote: {
        url: "check-email.php",
        type: "post",
        data: {
          username: function() {
            return $( "#username" ).val();
          }
        }
      }
    }
  }
})

接受结果

方法接受字符串 “true” 代表验证成功，接受字符串“false” 、undefined、null 作为验证失败；同时remote方法还支持在验证失败的时候，显示服务器自定义的错误消息。此时，要求返回的是一个带引号的字符串 ，比如’ "That name is already taken, try peter123 instead" ‘，如果没有带引号，这个错误消息是不会被显示出来的。

验证结果转换

通常后台的接口是返回一个JSON或者XML等格式的消息作为响应，不会单独返回一个字符串，如果单独为了这个插件修改后台返回消息的结构PHP表单验证，有点得不偿失。还好$.ajax() 方法提供了一个叫做dataFilter 的配置，它作为一个filter会接受XMLHttpRequest的响应，然后对响应数据进行转换，再返回。利用这个方法，我们可以将后台的JSON消息，转换为jQuery Validate所需要的格式。

$( "#myForm" ).validate({
  rules: {
    email: {
      required: true,
      email: true,
      remote: {
        url: "check-email.php",
        type: "post",
        data: {
          username: function() {
            return $( "#username" ).val();
          }
        },
        dataFilter: function(data, dataType) {
           var resp = JSON.parse(data);
           if (resp.result == true) {
             // 如果验证通过，返回true
             return true;
           } else {
            // 如果验证失败，返回自定义的错误消息
             return '"' + resp.errMsg + '"';
           }
        }
      }
    }
  }
});

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!