Validform+layer实现漂亮的表单验证特效

前端技术 2023/09/09 JavaScript

Validform是一款优秀的表单验证插件，layer是一款优秀的弹出窗口插件。下面通过例子看看这二者碰出的火花吧

首先要引入jquery,Validform和layer

<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\"><?php echo $safecode; ?></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>

服务端返回

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

本例子流程：点击提交->逐项验证表单->完成验证ajax提交->根据返回信息判断->弹出消息

本文地址：https://www.stayed.cn/item/25939

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案