Heim  >  Artikel  >  Web-Frontend  >  Die Validform-Ebene implementiert schöne Formularvalidierungseffekte_jquery

Die Validform-Ebene implementiert schöne Formularvalidierungseffekte_jquery

WBOY
WBOYOriginal
2016-05-16 15:19:371889Durchsuche

Validform ist ein hervorragendes Formularvalidierungs-Plug-in und Layer ist ein hervorragendes Popup-Fenster-Plug-in. Werfen wir einen Blick auf die Funken zwischen den beiden anhand von Beispielen

Führen Sie zunächst jquery, Validform und Layer ein

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://res.layui.com/lay/lib/layer/src/layer.js"></script> 
<script type="text/javascript" src="http://lib.h-ui.net/Validform/5.3.2/Validform.min.js"></script> 

HTML

<form action="post.php" method="post" name="form" class="form form-horizontal" id="form-Validform"> 
  <div class="row cl"> 
   <label class="form-label col-3"><span class="c-red">*</span>用户昵称:</label> 
   <div class="formControls col-8"> 
    <input type="text" class="input-text" value="" placeholder="可使用3-16位中英文字符" id="uname" name="uname" datatype="*2-16" nullmsg="用户昵称不能为空"> 
   </div> 
  </div> 
  <div class="row cl"> 
   <label class="form-label col-3"><span class="c-red">*</span>用户密码:</label> 
   <div class="formControls col-8"> 
    <input type="text" class="input-text" value="" placeholder="5-20位,范围[0-9a-zA-Z_@!.-]" id="pwd" name="pwd" datatype="/\w{5,20}/i" nullmsg="用户密码不能为空"> 
   </div> 
  </div> 
   <div class="row cl"> 
     <label class="form-label col-3"><span class="c-red">*</span>Email:</label> 
     <div class="formControls col-8"> 
      <input type="text" class="input-text" value="" placeholder="****@***.***" id="email" name="email" datatype="e" nullmsg="Email不能为空"> 
     </div> 
   </div> 
   <div class="row cl"> 
     <label class="form-label col-3"></label> 
     <div class="formControls col-8"> 
      <a href="javascript:;" id="safecodes" style="color:red"><&#63;php echo $safecode; &#63;></a> 
     </div> 
   </div> 
  </div> 
  <div class="row cl" style="text-align:center"> 
    <input class="btn btn-primary radius" type="submit" value="  提交  "> 
  </div> 
  </form> 

JS

<script type="text/javascript"> 
$(function(){ 
  $("#form-Validform").Validform({ 
    tiptype:4, 
    ajaxPost:true, 
    callback:function(data){ 
      if(data.status==1){ 
        layer.msg(data.info, {icon: data.status,time: 1000}, function(){ 
          location.reload();//刷新页面 
          });  
      } 
      else{ 
        layer.msg(data.info, {icon: data.status,time: 3000}); 
      } 
    } 
  }); 
  $('#safecodes').click( function () { 
    $('#safecode').val($('#safecodes').text()); 
  }); 
}); 
</script> 

Server kehrt zurück

{"info":"\u6210\u529f","status":1,"url":""} 

Dieser Beispielprozess: Klicken Sie auf „Senden“ – > Überprüfen Sie das Formular Element für Element – ​​> Schließen Sie die Ajax-Übermittlung der Überprüfung ab – > Beurteilen Sie anhand der zurückgegebenen Informationen – > Popup-Nachricht

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn