Rumah > hujung hadapan web > tutorial js > Ringkasan kaedah penyerahan mengesahkan dan membentuk pemalam dalam kemahiran jquery_javascript

Ringkasan kaedah penyerahan mengesahkan dan membentuk pemalam dalam kemahiran jquery_javascript

WBOY
Lepaskan: 2016-05-16 15:07:57
asal
1375 orang telah melayarinya

Ikhtisar: Artikel ini terutamanya membincangkan jquery.validate digabungkan dengan jquery.form untuk melaksanakan penyelesaian pengesahan dan penyerahan borang.

Kaedah 1: Melalui pilihan submitHandler jquery.validate, iaitu, fungsi panggil balik dilaksanakan apabila borang lulus pengesahan. Hantar borang melalui jquery.form dalam fungsi panggil balik ini;

Kaedah 2: Gunakan jquery.form’s beforeSubmit, iaitu fungsi panggil balik yang dilaksanakan sebelum menyerahkan borang Jika fungsi ini kembali benar, borang diserahkan Jika ia mengembalikan palsu, penyerahan borang akan ditamatkan. Mengikut kaedah valid() pemalam jquery.validate, borang boleh disahkan apabila menyerahkan borang melalui jquery.form.

Kaedah 3: Sahkan borang melalui jquery.validate. Kelebihan kaedah ini ialah anda mempunyai lebih kawalan ke atas pengesahan borang

Contoh: Tiga kaedah di atas diterangkan di bawah melalui tiga contoh

Muat fail gaya CSS

Salin kod Kod adalah seperti berikut:
Kandungan fail gaya 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;
}
Salin selepas log masuk

Muat fail 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>
Salin selepas log masuk
Kandungan 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>
Salin selepas log masuk

jquery.validate+jquery.form menyerahkan kandungan javascript kaedah 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>
Salin selepas log masuk

jquery.validate+jquery.form menyerahkan kandungan javascript kaedah 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>
Salin selepas log masuk

jquery.validate+jquery.form menyerahkan kandungan javascript kaedah 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>
Salin selepas log masuk

Kod sumber DEMO:

Muat turun

Beberapa soalan

1. Sebenarnya, masalah ini ditemui semasa saya menulis artikel ini malam tadi Apabila saya menggunakan dalam pengepala fail HTML, nampaknya terdapat beberapa masalah dengan gaya kotak input dan ralat mesej. Walau bagaimanapun, hari ini saya mendapati bahawa masalahnya tidak begitu mudah Apabila menggunakan , untuk kotak input "nama" - ia hanya perlu mencapai tiga aksara untuk dianggap lulus pengesahan - selepas memasukkan aksara pertama, aksara aksara kedua, paparan ralat adalah normal Apabila aksara ketiga dimasukkan, paparan ralat hilang, dan gambar "koma" menunjukkan bahawa pengesahan telah diluluskan dipaparkan. Setakat ini, semuanya nampaknya berjalan lancar, tetapi jika anda terus memasukkan watak, seperti watak keempat, watak kelima.. masalah timbul. Seperti yang ditunjukkan di bawah:

Tiada masalah sedemikian apabila menggunakan dan bukannya menggunakan , semuanya berfungsi dengan baik. Namun, persoalannya sekarang ialah, mengapa menambah

Masalah ini agak rumit untuk ditangani. Berikut adalah senarai prosesnya. Dan berikan penyelesaian pada akhirnya

Pertama sekali, ini kerana saya menyemak mesej ralat semalam dan memberi perhatian kepada kod yang memasukkan mesej ralat. Saya menambahkan ayat pada 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());
},
Salin selepas log masuk

Apabila anda memasukkan aksara pertama, anda mendapat sesuatu seperti gambar di bawah

Masukkan tiga aksara Selepas pengesahan berjaya, anda akan mendapat gambar berikut:

Teruskan masukkan lebih banyak aksara dan dapatkan keputusan seperti yang ditunjukkan di bawah

Ini menggambarkan isu berikut:

1 Tidak kira sama ada pengesahan gagal atau berjaya, errorPlacement:function(...)

akan dipanggil

2. s.remove() tidak berfungsi.

Memandangkan saya menggunakan dan bukannya 🎜>

Oleh itu, kod di atas ditulis seperti berikut

 var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");
 if(s!=null){
  s.remove();
 }
Salin selepas log masuk
Walau bagaimanapun, di bawah , tidak boleh ditemui berdasarkan htmlFor, jadi htmlFor harus ditukar kepada untuk di sini, itu ialah,

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

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

虽然解决问题,但是在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;
}
Salin selepas log masuk

$(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
   }
  }
 });
 ....
});
Salin selepas log masuk

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>
Salin selepas log masuk

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan