bootstrap3 第2课：表单验证

做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：表示非空

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

bootstrap3 第2课：表单验证相关推荐

bootstrap html5 表单验证,基于Bootstrap+jQuery.validate实现表单验证
这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤 ...
bootstrap 5 表单验证
bootstrap 5 表单验证写在前面 Bootstrap 是一个功能强大.功能丰富的前端工具包.bootstrap 以其优秀的栅格系统,为网页创作带来的极大的方便.目前版本是5.2 .然而在表单 ...
视频教程-Web前端开发利器 SPRY框架之表单验证-JavaScript
Web前端开发利器 SPRY框架之表单验证有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情境& ...
bootstrap表单验证
bootsrarp为表单验证提供了插件:BootstrapValidator,可以在官网和GitHub上查看 1.引入头文件: <script src="${pageContext.r ...
Bootstrap5使用bootstrapValidator完成表单验证（包括解决样式、图标不显示及其他组件表单验证出问题解决方案）
以下都为个人实践. CND引入bootstrap5及bootstrapValidator文件 bootstrap5 <link href="https://cdn.jsdelivr.n ...
[JAVA EE] Thymeleaf 高级用法：模板布局，带参数的引用片段，表单验证，常用校验注解
模板布局公共部分通常定义为模板布局:如页眉,页脚,公共导航栏.菜单等. 模板布局定义方法布局页中用 th:fragment 定义模板片段,其他页面用 th:insert 引用片段例如:foote ...
float js 正则验证_使用HTML和Vuejs进行表单验证
他们说大多数网络应用只是HTML表单.好吧,表单需要验证,谢天谢地,HTML5带有许多优秀的内置表单验证功能,可用于电子邮件,数字,最大值,分钟等.您甚至可以使用模式编写自己的验证规则.在本文中,我将 ...
JavaScript 表单与表单验证
JavaScript 表单 JavaScript 表单验证 HTML 表单验证可以通过 JavaScript 来完成. 以下实例代码用于判断表单字段(fname)值是否存在,如果存在,则弹出信息,否则 ...
jquery 实现表单验证功能代码(简洁)
html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>表单验证页面</title&g ...

bootstrap3 第2课：表单验证

bootstrap3 第2课：表单验证相关推荐

最新文章

热门文章