Bootstrap4表单验证（纯JavaScript方法）

最新推荐文章于 2022-11-07 23:52:16 发布

微笑丶1998

最新推荐文章于 2022-11-07 23:52:16 发布

阅读量1.1w

点赞数 5

分类专栏：网页前端文章标签： bootstrap4

本文链接：https://blog.csdn.net/j84491135/article/details/80433016

版权

网页前端专栏收录该内容

2 篇文章 1 订阅

订阅专栏

Bootstrap4表单验证

网上bootstrap4表单验证的文章实在太少了，当初做的时候老是摸不着头脑，现在我来分享一下自己的做法，希望小伙伴们少走点弯路

一、示例代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <!--bs4 css-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!--js引用-->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
    <!--form表单onsubmit属性写上调用的js方法 如下调用checkForm()方法-->
    <form onsubmit="return checkForm()">
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" class="form-control" name="username" id="username" placeholder="User Name">
            <!--放错误反馈-->
            <div class="invalid-feedback" id="username-feedback"></div>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" name="password" id="password" placeholder="Password">
        </div>
        <div class="form-group">
            <div class="checkbox" style="width:50%;float:left;">
                <label>
                    <input type="checkbox" name="remember"> 记住我
                </label>
            </div>
            <div style="width:50%;float:left;">
                <button type="submit" class="btn btn-primary btn-block">登录</button>
            </div>
        </div>
    </form>
</div>
<script>
    //以检查用户名不能为空不能有特殊符号为例
    function checkForm() {
        var username = document.getElementById("username");//获取username那个div
        var feedback = document.getElementById("username-feedback");
        //不能为空
        if(username.value==""){
            feedback.innerHTML = "用户名为空！";//修改username-feedback div中的内容
            username.classList.remove("is-valid");//清除合法状态
            username.classList.add("is-invalid");//添加非法状态
            return false;//onsubmit  return false阻止表单提交
        }
        //不能有特殊符号
        var patrn = /[@#\$%\^&\*]+/g;//正则表达式
        if(patrn.exec(username.value)){
            feedback.innerHTML = "用户名不能存在特殊符号！";
            username.classList.remove("is-valid");
            username.classList.add("is-invalid");
            return false;
        }

        //清除错误提示，改成成功提示
        username.classList.remove("is-invalid");
        username.classList.add("is-valid");
        feedback.innerHTML="";
        return true;
    }
</script>
</body>
</html>

要注意，这里只是bootstrap4表单验证其中一种实现方法。官网上还有各种各样的实现。

二、效果图

样式

效果1
效果1
效果2
效果2

微笑丶1998

关注

5
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap4表单验证（纯JavaScript方法）

Bootstrap4表单验证网上bootstrap4表单验证的文章实在太少了，当初做的时候老是摸不着头脑，现在我来分享一下自己的做法，希望小伙伴们少走点弯路一、示例代码&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;zh-cn&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quo
复制链接

扫一扫

专栏目录