jQuery借助Bootstraps实现表单验证_bootstrap jquery 表单验证-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42881159/article/details/116072209

该博客介绍了一种使用jQuery和Bootstrap库来实现网页表单验证的方法。通过JavaScript代码，当用户输入为空时，表单字段将显示错误样式，包括红色背景、错误图标和提示文字；而当输入有效时，表单则呈现绿色背景和正确图标。此验证过程增强了用户体验，确保了表单数据的准确性。

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

jQuery借助Bootstraps实现表单验证

实现演示图片：
在这里插入图片描述
功能说明：
1.暂时表单验证就是验证表单非空
2.当表单验证为非空时候。表单变成绿色，后面icon变成正确符号
3.当表单验证为空。表单变成红色，后面icon图标为错误符号，并且有提示文字

结构图：
在这里插入图片描述
head结构：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.1.0.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="js/bootstrapValidator.js"></script>
</head>

HTML代码：

<div class="container">
    <form action="" id="myForm" class="form-horizontal">
        <div class="form-group">
            <label for="username" class="col-md-3 control-label">用户名</label>
            <div class="col-md-6">
                <input type="text" name="username" id="username" class="form-control" placeholder="请输入用户名">
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="control-label col-md-3">密码</label>
            <div class="col-md-6">
                <input type="password" name="password" id="password" class="form-control" placeholder="请输入密码">
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-6 col-md-offset-3">
                <button type="submit" class="btn btn-primary">提交</button>
            </div>
        </div>
    </form>
</div>

<script>
    $(function () {
        $("#myForm").submit(function () {
            let username=$("#username").val();
            if (!username){
                /*给当前行添加验证样式*/
                $("#username").parents(".form-group").removeClass("has-success").addClass("has-error has-feedback");
                /*input标签内的字体图标设置*/
                /*先删除已有的字体图标*/
                $("#username").next("i").remove();
                /*创建新图标，插入到input框后*/
                let $i=$("<i class='glyphicon glyphicon-remove form-control-feedback'></i>");
                $("#username").after($i);
                /*设置验证提示语*/
                /*先删除已有的提示语*/
                $("#username").parents(".col-md-6").next("span").remove();
                let $span='<span class="help-block">用户名不能为空</span>';
                $("#username").parents(".col-md-6").after($span);
                /*获取光标*/
                $("#username").focus();
                flag=false;
            }else {
                $("#username").parents(".form-group").removeClass("has-error").addClass("has-success has-feedback");
                $("#username").next("i").remove();
                let $i=$("<i class='glyphicon glyphicon-ok form-control-feedback'></i>");
                $("#username").after($i);
                $("#username").parents(".col-md-6").next("span").remove();
                flag=true;
            }
            let password=$("#password").val();
            if(!password){
                /*给当前行添加验证样式*/
                $("#password").parents(".form-group").removeClass("has-success").addClass("has-error has-feedback");
                /*input标签内的字体图标设置*/
                /*先删除已有的字体图标*/
                $("#password").next("i").remove();
                /*创建新图标，插入到input框后*/
                let $i=$("<i class='glyphicon glyphicon-remove form-control-feedback'></i>");
                $("#password").after($i);
                /*设置验证提示语*/
                /*先删除已有的提示语*/
                $("#password").parents(".col-md-6").next("span").remove();
                let $span='<span class="help-block">密码不能为空</span>';
                $("#password").parents(".col-md-6").after($span);
                /*获取光标*/
                $("#password").focus();
                flag=false;
            }else {
                $("#password").parents(".form-group").removeClass("has-error").addClass("has-success has-feedback");
                $("#password").next("i").remove();
                let $i=$("<i class='glyphicon glyphicon-ok form-control-feedback'></i>");
                $("#password").after($i);
                $("#password").parents(".col-md-6").next("span").remove();
                flag=true;
            }
            /*阻止提交*/
            return false;
        });
    });
</script>