jquery.validate 验证(支持前台js验证通过,然后ajax后台数据校验)

下载 jquery-validation-1.13.1 demo 包。

看到 jquery-validation-1.13.1\demo\milk\index.html      这个例子 不错,验证成功 打上一个对号。然后看看 后台js 代码 发现

 <script src="../../lib/jquery.mockjax.js"></script>  这是什么 呢,原来 这个 用来 模仿 服务端验证的js ,模拟相应报文。如下:

 $.mockjax({
   url: "emails.action",
   response: function(settings) {
    var email = settings.data.email,
     emails = ["[email protected]", "[email protected]", "[email protected]", "[email protected]", "[email protected]", "[email protected]"];
    this.responseText = "true";
    if ($.inArray(email, emails) !== -1) {
     this.responseText = "false";
    }
   },
   responseTime: 500
  });

要验证的 文本框 Id 为 email,所以这里 url 为 "emails.action".(为啥不是email 呢,看看下面: )

var validator = $("#signupform").validate({
   rules: {
    email: {
     required: true,
     email: true,
     remote: "emails.action"
    } 

..........

原来 是email  属性上面定义一个remote  才能支持远程服务端验证  。

上面的都是废话了(我不需要模拟服务端,我就是用服务端啊)

然后参考如下:

http://www.cnblogs.com/xiawuyi/archive/2013/04/01/2990224.html  一个 MVC 的案例。

http://jqueryvalidation.org/remote-method/   官方的例子。

我的例子:

首先 找到 jquery.validate.js 文件  查找 dataType: "json"  然后 注释这行代码(我也不知道为啥它非要支持json,不去默认 text,或者返回数据格式自定义不好吗)

部分代码 如下:

<link href="plug/bootstrap/bootstrap.css" rel="stylesheet" />   你们可以不用
  <script src="js/jquery.min.js"></script>
  <script src="plug/bootstrap/dist/js/bootstrap.js"></script>   你们可以不用
  <script src="plug/jquery-validation/dist/jquery.validate.js"></script>

<input type="text" runat="server" class="form-control" data-rule-email="true" name="inputEmail" id="inputEmail"

 data-msg-email="请输入正确的邮件地址" placeholder="找回密码和注册验证通过的凭据" data-error="sssss" required>

    $(document).ready(function () {
      var validator = $("#form1").validate({
        rules: {
          inputEmail: {
            remote: {
              url: window.location.pathname, type: "post",
              data: {
                inputEmail: function () {
                  return $("#inputEmail").val();
                }
              }
            }
          }
        }
      })
    });

 

 

 

   if (Request.Form["inputEmail"] != null)
      {
        Response.Write(111);  //这里自己   定义 验证方法    就好
        Response.End();
      }

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。