Résumé des méthodes de soumission des plug-ins de validation et de formulaire dans les compétences jquery

Présentation : cet article traite principalement de jquery.validate combiné avec jquery.form pour implémenter des solutions de vérification et de soumission de formulaires.

Méthode 1 : via l'option submitHandler de jquery.validate, c'est-à-dire que la fonction de rappel est exécutée lorsque le formulaire réussit la vérification. Soumettez le formulaire via jquery.form dans cette fonction de rappel

Méthode 2 : utilisez beforeSubmit de jquery.form, qui est une fonction de rappel exécutée avant de soumettre le formulaire. Si cette fonction renvoie vrai, le formulaire est soumis. Si elle renvoie faux, la soumission du formulaire est terminée. Selon la méthode valid() du plug-in jquery.validate, le formulaire peut être vérifié lors de la soumission du formulaire via jquery.form.

Méthode 3 : Validez le formulaire via jquery.validate. L'avantage de cette méthode est que vous avez plus de contrôle sur la validation du formulaire

Exemples : Les trois méthodes ci-dessus sont expliquées ci-dessous à travers trois exemples

Charger le fichier de style CSS

Copier le code Le code est le suivant :

Contenu du fichier de style 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;
}

Copier après la connexion

Charger le fichier 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>

Copier après la connexion

Contenu 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>

Copier après la connexion

jquery.validate+jquery.form soumet le contenu javascript de la méthode 1

<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&#63;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>

Copier après la connexion

jquery.validate+jquery.form soumet le contenu javascript de la méthode 2

<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&#63;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>

Copier après la connexion

jquery.validate+jquery.form soumet le contenu javascript de la méthode 3

<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&#63;time="+ (new Date()).getTime(),
   beforeSubmit:showRequest,
   success:showResponse
  });
  return false; //此处必须返回false，阻止常规的form提交
 });
});
</script>

Copier après la connexion

Code source DEMO : Télécharger

Quelques questions

1. En fait, ce problème a été découvert lorsque j'ai écrit cet article hier soir. Lorsque j'ai utilisé dans l'en-tête du fichier HTML, il semblait y avoir des problèmes avec le style de la zone de saisie et une erreur. message. Cependant, aujourd'hui, j'ai découvert que le problème n'est pas si simple. Lors de l'utilisation de , pour la zone de saisie "nom" - il suffit d'atteindre trois caractères pour être considéré comme réussi la vérification - après avoir saisi le premier caractère, les caractères du deuxième caractère, l'affichage de l'erreur est normal. Lorsque le troisième caractère est saisi, l'affichage de l'erreur disparaît et une image « virgule » indiquant que la vérification est réussie s'affiche. Jusqu'à présent, tout semble bien fonctionner, mais si vous continuez à saisir des caractères, comme le quatrième caractère, le cinquième caractère... le problème survient. Comme indiqué ci-dessous :

Aucun problème de ce type lorsque vous utilisez au lieu d'utiliser , tout fonctionne bien. Cependant, la question est maintenant de savoir pourquoi l'ajout de

Ce problème est assez compliqué à gérer. Voici une liste du processus. Et donne une solution à la fin

Tout d’abord, c’est parce que je vérifiais le message d’erreur hier et que j’ai fait attention au code qui a inséré le message d’erreur. J'ai ajouté une phrase à 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());
},

Copier après la connexion

Lorsque vous entrez le premier caractère, vous obtenez quelque chose comme l'image ci-dessous

Entrez trois caractères. Après une vérification réussie, vous obtiendrez l'image suivante :

Continuez à saisir plus de caractères et obtenez le résultat comme indiqué ci-dessous

Cela illustre les problématiques suivantes :

1. Que la vérification échoue ou réussisse, errorPlacement:function(...)

sera appelé.

2. s.remove() ne fonctionne pas.

Puisque j'ai utilisé au lieu de lors de la rédaction de cet article, le contenu de la fenêtre contextuelle est htmlFor="cusername" au lieu de for="cusername", comme le montre la figure suivante :

Par conséquent, le code ci-dessus s'écrit comme suit

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

Copier après la connexion

Cependant, sous , ne peut pas être trouvé en fonction de htmlFor, donc htmlFor doit être remplacé par for ici, cela c'est,

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());
},

Copier après la connexion

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

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

Copier après la connexion

虽然解决问题，但是在chrome、firefox下仍有问题。了解这个问题的现象，可以用firefox或chrome测试一下——焦点离开输入框后，无法验证，只有点击“提交”按钮后才可以验证——这个问题的解决方案目前还没有深入下去。但是有解决的办法是，将上面的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" &#63; true : false;
    return result;
   }
  }
 };
 return remote;
}

Copier après la connexion

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

Copier après la connexion

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

<&#63;php
header("Content-Type:text/xml");
echo '<&#63;'.'xml version="1.0" encoding="utf-8"'.' &#63;>';
&#63;>
<AjaxClass>
<Msg>用户名格式不正确,用户名必须包含testa,请重新输入!</Msg>
<Result>0</Result>
</AjaxClass>

Copier après la connexion

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