【推荐】bootstrapValidator.min.js表单验证插件

最新推荐文章于 2025-05-30 09:00:37 发布

邹大叔

最新推荐文章于 2025-05-30 09:00:37 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/zuncle/article/details/54945837

Javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何利用bootstrapValidator.min.js这个JavaScript插件进行表单验证，提供了下载地址，并提到了验证的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

表单插件：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>