bootstrap3 第2课：表单验证

最新推荐文章于 2023-12-15 16:53:06 发布

李书明

最新推荐文章于 2023-12-15 16:53:06 发布

阅读量1.2k

点赞数

分类专栏： bootstrap3

本文链接：https://blog.csdn.net/lsmxx/article/details/100655600

版权

bootstrap3 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

做Web开发，表单验证是再常见不过的需求了，友好的错误提示能增加用户体验。比如我们在提交之前，首先要验证有哪些数据是必填项，哪些数据的格式需要验证。

如果我们的网页使用的bootstrap3框架搭建的，那么要想使用表单验证，还需要下载验证的组件。你可以点击下面的资源链接下载

https://download.csdn.net/download/lsmxx/11704617

下面我们来看，如何实现表单验证

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="http://127.0.0.1/mvc/public/static/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<link href="http://127.0.0.1/mvc/public/static/bootstapvalidator/css/bootstrapValidator.css" rel="stylesheet">
<script src="http://127.0.0.1/mvc/public/static/jquery-1.12.4.min.js"></script>
<script src="http://127.0.0.1/mvc/public/static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="http://127.0.0.1/mvc/public/static/bootstapvalidator/js/bootstrapValidator.min.js"></script>
<script src="http://127.0.0.1/mvc/public/static/bootstapvalidator/js/language/zh_CN.js"></script>    
</head>
<body>
<div class="container">
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">添加学生</h3>
            </div>
            <div class="panel-body">
                <form class="form-horizontal" action="http://127.0.0.1/mvc/pubic/index.php/index/adddo" method="post">
                    <div class="form-group">
                        <label for="no" class="col-sm-2 control-label">学号</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="no" name="no" placeholder="学号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="name" name="name" placeholder="姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="sex" value="男" checked> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="sex" value="女"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="age" class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="age" name="age" placeholder="年龄">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-primary">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script>
    $(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                no: {
                    validators: {
                        notEmpty: {
                            message: '学号不能为空'
                        }
                    }
                },
                name: {
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        }
                    }
                },
                age: {
                    validators: {
                        notEmpty: {
                            message: '邮箱地址不能为空'
                        }
                    }
                }
            }
        });
    });
</script>

分析上面的代码：

在head区，加载两个样式文件：先是bootstrap.css，然后是bootstrapValidator.css

加载四个js文件：jquery-1.12.4.min.js，bootstrap.js，bootstrapValidator.min.js，zh_CN.js

这四个文件有先后顺序，其中zh_CN.js是语言包

form表单一定放在<form></form>首尾标签之间，并且符合bootstrap 的表单结构，即必须有:

<div class="form-group">

＜/form>

需要验证的表单元素必须有name属性，如：

<input type="email" class="form-control" id="no" name="no" placeholder="学号">

最后就是写验证脚本：

$('form').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        no: {
            validators: {
                notEmpty: {
                    message: '学号不能为空'
                }
            }
        },
        name: {
            validators: {
                notEmpty: {
                    message: '用户名不能为空'
                }
            }
        },
        age: {
            validators: {
                notEmpty: {
                    message: '邮箱地址不能为空'
                }
            }
        }
    }
});

其中的no,name,age就是表单中的元素，notEmpty：表示非空

最基本的表单验证就是这些，你可以体验一下。

李书明

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
bootstrap3 第2课：表单验证

做Web开发，表单验证是再常见不过的需求了，友好的错误提示能增加用户体验。比如我们在提交之前，首先要验证有哪些数据是必填项，哪些数据的格式需要验证。如果我们的网页使用的bootstrap3框架搭建的，那么要想使用表单验证，还需要下载验证的组件。你可以点击下面的资源链接下载https://download.csdn.net/download/lsmxx/11704617下面我们来看，...
复制链接

扫一扫