bootstrapValidator.min.js表单验证插件

DJPLH

2017-02-09

本文实例为大家分享了bootstrapValidator.min.js表单验证的具体代码，供大家参考，具体内容如下

注意：下载后全选复制并粘贴到新建js文件名为bootstrapValidator.min.js下即可。

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    table{
      width: 690px;
    }
    th{
      padding-left: 23%;
      padding-bottom: 20px;
    }
    td{
      width: 110px;
    }
    b{
      color: #f00;
    }
  </style>
</head>
<body>
<!--表单-->
  <div class="ctn">
    <form class="fm" method="post" onsubmit="return doTable()">
      <table align="center">
        <th class="perWl" align="left" colspan="2">物流服务商</th>
        <tr>
          <td class="txt" align="right" width="100">登 陆 名 称：</td>
          <td class="wlIcon icon">
           <s></s>
           <input type="text" name="lgname" maxlength="20"/>
           <b>*</b>
           <span></span>
          </td>
        </tr>
        <tr>
          <td class="txt" align="right">密 码：</td>
          <td class="wlIcon icon">
           <s class="mm"></s>
           <input type="password" name="password" maxlength="18"/>
           <b>*</b>
           <span></span>
          </td>
        </tr>
        <tr>
          <td class="txt" align="right">确 认 密 码：</td>
          <td class="wlIcon icon">
           <s class="mm"></s>
           <input type="password" name="repass" maxlength="18"/>
           <b>*</b>
           <span></span>
          </td>
        </tr>
        <tr>
          <td class="wlBtns" align="center" colspan="2">
           <s></s>
           <button type="submit">注 册</button>
           <button class="cancel" type="submit">取 消</button>
          </td>
        </tr>
      </table>
    </form>
  </div>
  <script src="js/jquery-1.11.3.js"></script>
  <script src="js/bootstrapValidator.min.js"></script>
  <script type="text/javascript">
    /*表单验证*/
    var gets = true;//是否让表单提交
    $(function(){
      // 提示信息===========================================
      $("input[name=lgname]").focus(function(){
        if($(this).val() == this.defaultValue){
          $(this).val('');
        }
      }).blur(function(){
        if($(this).val() == ''){
          $(this).val(this.defaultValue);
        }
      });
      //当输入框失去焦点的时候，需要执行的方法
      $("input[name=lgname]").blur(function(){doLgname();});
      $("input[name=password]").blur(function(){doPassword();});
      $("input[name=repass]").blur(function(){doRepass();});
    });
    // 登陆名称的验证==========================
    function doLgname(){
      var t = $("input[name=lgname]");
      var span = t.next();
      if(/^\w{6,16}$/.test(t.val())){
        span.html("填写正确").css({color:"green",fontSize:"12px"});
        return true;
      }else{
        span.html("包含数字、字母、下划线，长度在6-16之间").css({color:"#ec4e4e",fontSize:"12px"});
        return false;
      }
    }
    // 密码的验证==========================
    function doPassword(){
      var t = $("input[name=password]");
      var span = t.next();
      if(t.val() == ''){
        span.html("密码不能为空").css({color:"#ec4e4e",fontSize:"12px"});
        return false;
      }else{
        span.html('');
        if(/.{15,}/.test(t.val())){
          span.html("密码长度不合法");
          return false;
        }
        return true;
      }
    }
    // 确认密码的验证==========================
    function doRepass(){
      var t = $("input[name=repass]");
      var span = t.next();
      if(t.val() == $("input[name=password]").val() && t.val() != ''){
        span.html("填写正确").css({color:"green",fontSize:"12px"});
        return true;
      }else{
        span.html("两次密码不一致").css({color:"#ec4e4e",fontSize:"12px"});
        return false;
      }
    }
    // 数据提交的时候执行的方法
    function doTable(){
      var lg = doLgname();
      var pass = doPassword();
      var repass = doRepass();
      if(lg&&pass&&repass){
        return true;
      }else{
        return false;
      }
    }
  </script>
</body>
</html>

表单插件：bootstrapValidator.min.js 下载地址

表单验证 bootstrapvalidator td