做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:表示非空
最基本的表单验证就是这些,你可以体验一下。