zoukankan html css js c++ java

jquery.validate+jquery.form提交的三种方式

原文：http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html

jquery.validate+jquery.form提交的三种方式

概述：本篇主要讨论jquery.validate结合jquery.form实现对表单的验证和提交方案。

方式一：是通过jquery.validate的submitHandler选项，即当表单通过验证时运行回调函数。在这个回调函数中通过jquery.form来提交表单；

方式二：是通过jquery.form的beforeSubmit，即在提交表单前运行的回调函数，这个函数假设返回true，则提交表单，假设返回false，则终止提交表单。依据jquery.validate插件的valid()方法，就能够通过jquery.form提交表单时来对表单进行验证。

方式三：是通过jquery.validate验证表单的validate方法。这种方法的优点是对表单验证的控制更加自由

实例：以下通过三个实例分别阐述上面的三种方式

加载CSS样式文件

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

CSS样式文件内容

input{
  height:25px;
  line-height:25px;
  padding-left:4px;
}

span.checked{
  padding: 0px 5px 0px 25px;
  margin-left: 10px;
  margin-top: 0px;
  margin-bottom: 3px;
  height: 25px;
  line-height:25px;
  font-size: 12px;
  white-space: nowrap;
  text-align: left;
  color: #E6594E;
  background: url("images/acion2.png") no-repeat 3px; /* #FCEAE8 */
}
span.unchecked{
  padding: 0px 5px 0px 25px;
  margin-left: 10px;
  margin-top: 0px;
  margin-bottom: 3px;
  height: 23px;
  line-height:23px;
  font-size: 12px;
  border: 1px solid #E6594E;
  white-space: nowrap;
  text-align: left;
  color: #E6594E;
  background: #FCEAE8 url("images/acion.png") no-repeat 3px;
}

加载javascript文件

<script language="JavaScript" type="text/JavaScript" src="js/jQuery1.6.2.js"></script>
<script language="JavaScript" type="text/JavaScript" src="js/jquery.form.js"></script>
<script language="JavaScript" type="text/JavaScript" src="js/jquery.validate.js"></script>
<script language="JavaScript" type="text/JavaScript" src="js/localization/messages_tw.js"></script>

HTML内容

<body><span id="result"></span>
<form id='commentForm'>
  <fieldset>
  <legend>jquery.validate+jquery.form提交的三种方式</legend>
    <p>
      <label for='cusername'>姓名</label><em>*</em>
      <input id='cusername' name='username' size='25' />
    </p>
    <p>
      <label for='cemail'>电子邮件</label><em>*</em>
      <input id='cemail' name='email' size='25' />
    </p>
    <p>
      <input class='submit' type='submit' value='提交'>
    </p>
  </fieldset>
</form>
</body>

jquery.validate+jquery.form提交方式1的javascript内容

<script language="javascript">
function showResponse(responseText,statusText) {
  if(statusText=='success'){
    $("#result").html(responseText);
  }
}

$(document).ready(function(){
  $('#commentForm').validate({
    focusCleanup:true,focusInvalid:false,
    errorClass: "unchecked",
    validClass: "checked",
    errorElement: "span",
    submitHandler:function(form){
      $(form).ajaxSubmit({
        type:"post",
        url:"test_save.php?time="+ (new Date()).getTime(),
        //beforeSubmit: showRequest,
        success: showResponse
      });
    },
    errorPlacement:function(error,element){
      var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");
      if(s!=null){
        s.remove();
      }
      error.appendTo(element.parent());
    },
    success: function(label) {
      //label.addClass("valid").text("Ok!")
      label.removeClass("unchecked").addClass("checked");
    },
    rules:{
      username:{required:true,minlength:3},
      email:{
        required:true
      }
    }
  });
});
</script>

jquery.validate+jquery.form提交方式2的javascript内容

<script language="javascript">
function showResponse(responseText,statusText) {
  if(statusText=='success'){
    $("#result").html(responseText);
  }
}

function showRequest(formData,jqForm,options){
  return $("#commentForm").valid();
}

$(document).ready(function(){
  $('#commentForm').submit(function(){
    $(this).ajaxSubmit({
      type:"post",
      url:"test_save.php?time="+ (new Date()).getTime(),
      beforeSubmit:showRequest,
      success:showResponse
    });
    return false; //此处必须返回false，阻止常规的form提交
  });

  $('#commentForm').validate({
    focusCleanup:true,focusInvalid:false,
    errorClass: "unchecked",
    validClass: "checked",
    errorElement: "span",
    errorPlacement:function(error,element){
      var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");
      if(s!=null){
        s.remove();
      }
      error.appendTo(element.parent());
    },
    success: function(label) {
      //label.addClass("valid").text("Ok!")
      label.removeClass("unchecked").addClass("checked");
    },
    rules:{
      username:{required:true,minlength:3},
      email:{
        required:true
      }
    }
  });
});
</script>

jquery.validate+jquery.form提交方式3的javascript内容

<script language="javascript">
  var options={
    focusCleanup:true,focusInvalid:false,
    errorClass: "unchecked",
    validClass: "checked",
    errorElement: "span",
    errorPlacement:function(error,element){
      var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");
      if(s!=null){
        s.remove();
      }
      error.appendTo(element.parent());
    },
    success: function(label) {
      //label.addClass("valid").text("Ok!")
      label.removeClass("unchecked").addClass("checked");
    },
    rules:{
      username:{required:true,minlength:3},
      email:{
        required:true
      }
    }
  };

function showResponse(responseText,statusText) {
  if(statusText=='success'){
    $("#result").html(responseText);
  }
}

function showRequest(formData,jqForm,options){
  return $("#commentForm").valid();
}

$(document).ready(function(){
  validator=$('#commentForm').validate(options);
  $("#reset").click(function(){
    validator.resetForm();
  });

  $("button").click(function(){
    validator.form();
  });

  $('#commentForm').submit(function(){
    $(this).ajaxSubmit({
      type:"post",
      url:"test_save.php?time="+ (new Date()).getTime(),
      beforeSubmit:showRequest,
      success:showResponse
    });
    return false; //此处必须返回false，阻止常规的form提交
  });
});
</script>

DEMO源代码：下载

一些问题

1、事实上这个问题在昨天晚上写这篇文章的时候就有发现，即我在HTML文件头使用<!DOCTYPE html>时，输入框及错误信息的样式似乎有些问题。只是今天发现问题并不是这么简单，在使用<!DOCTYPE html>时，针对“姓名”这个输入框来说——仅仅须达到三个字符就觉得通过验证——在输入第一个字符、第二个字符时，错误显示正常，输入第三个字符时，错误显示消失，并显示一个表示验证通过的“逗号”图片。到眼下为止，一切似乎都非常正常，但假设在继续输入字符，比方输入第四个字符、第五个字符......问题出现了。例如以下图所看到的：

不使用<!DOCTYPE html>，而使用<html>时没有这种问题，一切正常。只是，如今的问题是，为什么加上<!DOCTYPE html>会产生这种问题?并且，做为前端来说，加上<!DOCTYPE html>是必须的。

这个问题处理的比較纠结，这里罗列一下处理的过程。而且在最后给一个解决方式

首先，是由于昨天在查看错误提示信息，关注一下插入错误信息的代码。我在errorPlacement中添加了一句：alert(element.parent().html());

errorPlacement:function(error,element){
  alert(element.parent().html());
  var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");
  if(s!=null){
    s.remove();
  }
  error.appendTo(element.parent());
},

输入第一个字符时，得到例如以下图所看到的

输入三个字符，验证成功后，得到例如以下图所看到的：

继续输入很多其它字符，得到例如以下图所看到的

这就说明了下面几个问题：

1、无论验证失败还是成功，都会调用errorPlacement:function(...)

2、s.remove()没有起作用。

因为在写这篇文章时使用的是<html>而不是<!DOCTYPE html>，弹出的内容是htmlFor="cusername"，而不是for="cusername"，例如以下图所看到的：

因此，上面的代码中写成例如以下的方式

  var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");
  if(s!=null){
    s.remove();
  }

然而在<!DOCTYPE html>下，无法依据htmlFor找到<span class=checked generated="true" htmlFor="cusername"></span>，因此这里应该把htmlFor改成for，即

errorPlacement:function(error,element){
  alert(element.parent().html());
  var s=element.parent().find("span[for='" + element.attr("id") + "']");
  if(s!=null){
    s.remove();
  }
  error.appendTo(element.parent());
},

问题似乎攻克了。但上面提到，无论验证成功或失败，都会调用errorPlacement:function(...)，那能够在这里推断有没有错误，假设有错误，则显示。防止已经验证成功的情况下仍会调用。这样就不会寻找span的for属性值是否为当前控件的name名称了（样例中是for="cusername"）。改进的代码例如以下：

errorPlacement:function(error,element){
  if(error.html()!=''){
    error.appendTo(element.parent());
  }
},

尽管解决问题，可是在chrome、firefox下仍有问题。了解这个问题的现象，能够用firefox或chrome測试一下——焦点离开输入框后，无法验证，仅仅有点击“提交”button后才干够验证——这个问题的解决方式眼下还没有深入下去。可是有解决的办法是，将上面的jquery1.6.2换成jquery1.3.2或jquery1.4（其他的jquery版本号未測试，可能是低于jquery1.6.2的版本号都能够）就可以解决问题。

建议：

1、使用jquery1.3.2版本号，这样能够节省非常多时间来解决兼容方面的问题。

很多其它：

本样例中的jquery.validate，攻克了remote远程验证仅仅返回true or false的局限。能够返回代码及出错的提示信息，更好的人性化需求。用法就在这介绍一下

添加下面函数

function GetRemoteInfo(postUrl,data){
  var remote = {
    type: "POST",
    async: false,
    url: postUrl,
    dataType: "xml",
    data: data,
    dataFilter: function(dataXML) {
      var result = new Object();
      result.Result = jQuery(dataXML).find("Result").text();
      result.Msg = jQuery(dataXML).find("Msg").text();
      //alert(result.Result);
      if (result.Result == "-1") {
        result.Result = false;
        return result;
      }else{
        result.Result = result.Result == "1" ? true : false;
        return result;
      }
    }
  };
  return remote;
}

$(document).ready(function(){
  var dataInfo ={email:function(){return $("#cemail").val();}};
  var remoteInfo = GetRemoteInfo('check-email.php?time='+(new Date()).getTime(),dataInfo);
  $('#commentForm').validate({
    rules:{
      username:{
        required:true,
        minlength:3
      },
      email:{
        required:true,
        remote:remoteInfo
      }
    }
  });
  ....
});

check-email.php返回的内容为xml格式，格式例如以下

<?php
header("Content-Type:text/xml");
echo '<?'.'xml version="1.0" encoding="utf-8"'.' ?>';
?>
<AjaxClass>
<Msg>username格式不对,username必须包括testa,请又一次输入!</Msg>
<Result>0</Result>
</AjaxClass>

result值为0，返回的是false，表示验证失败；result值为1，返回的是true，表示验证成功

查看全文

相关阅读:
UVA
UVA
模板——扩展欧几里得算法（求ax+by=gcd的解）
UVA
模板——2.2 素数筛选和合数分解
 模板——素数筛选
 Educational Codeforces Round 46 (Rated for Div. 2)
Educational Codeforces Round 46 (Rated for Div. 2) E. We Need More Bosses
Educational Codeforces Round 46 (Rated for Div. 2) D. Yet Another Problem On a Subsequence
Educational Codeforces Round 46 (Rated for Div. 2) C. Covered Points Count

原文地址：https://www.cnblogs.com/gcczhongduan/p/4300539.html

热门文章
POJ
bryce1010专题训练——树状数组
 HDU
HDU
HDU
2017多校联合第二场
 HDU
HDU
HDU
HDU