效果图如下：
完整源代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 页内 全局起始路径 -->
<base href="${basePath}" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet"
href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<!-- Jquery 依赖 -->
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script
src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<!-- 表单校验插件 -->
<script
src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
<script type="text/javascript">
$(function() {
$('form')
.bootstrapValidator(
{
message : 'This value is not valid',
feedbackIcons : {
valid : 'glyphiconglyphicon-ok',
invalid : 'glyphiconglyphicon-remove',
validating : 'glyphiconglyphicon-refresh'
},
fields : {
account : {
message : '账号验证失败',
validators : {
notEmpty : {
message : '账号不能为空'
},
stringLength : {
min : 6,
max : 18,
message : '账号长度必须为6到18之间'
},
regexp : {
regexp : /^[a-zA-Z0-9_]+$/,
message : '账号只能包含大写、小写、数字和下划线'
}
}
},
phone : {
message : 'The phone is not valid',
validators : {
notEmpty : {
message : '手机号码不能为空'
},
stringLength : {
min : 11,
max : 11,
message : '请输入11位手机号码'
},
regexp : {
regexp : /^1[3|5|7|8]{1}[0-9]{9}$/,
message : '请输入正确的手机号码'
}
}
},
verificationCode : {
validators : {
notEmpty : {
message : '验证码不能为空'
}
}
},
password : {
message : '密码无效',
validators : {
notEmpty : {
message : '密码不能为空'
},
stringLength : {
min : 6,
max : 18,
message : '用户名长度必须在6到30之间'
},
identical : {//相同
field : 'repassword', //需要进行比较的input name值
message : '两次密码不一致'
},
different : {//不能和用户名相同
field : 'account',//需要进行比较的input name值
message : '不能和用户名相同'
},
regexp : {
regexp : /^[a-zA-Z0-9_\.]+$/,
message : 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
repassword: {
message: '密码无效',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
},
identical: {//相同
field: 'password',
message: '两次密码不一致'
},
different: {//不能和用户名相同
field: 'account',
message: '不能和用户名相同'
},
regexp: {//匹配规则
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
nickname : {
validators : {
notEmpty : {
message : '昵称不能为空'
}
}
},
email : {
validators : {
notEmpty : {
message : '邮箱地址不能为空'
},
emailAddress : {
message : '请输入正确的邮件地址'
}
}
}
}
});
});
</script>
</head>
<body>
<form class="form-horizontal" style="padding: 30px 100px 10px;"
action="">
<fieldset>
<legend>注册账号</legend>
</fieldset>
<div class="form-group">
<label for="account" class="col-sm-2 control-label">账户：</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="account" name="account">
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-2 control-label">手机号码：</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="phone" name="phone">
</div>
</div>
<div class="form-group">
<label for="verificationCode" class="col-sm-2 control-label">短信校验码：</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="verificationCode"
name="verificationCode" placeholder="输入手机验证码">
</div>
<div style="display: inline">
<button type="button" class="btn btn-info">获取验证码</button>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密码：</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="password"
name="password">
</div>
<div style="display: inline">
<label class="help-block">6-16位字母、数字、符号、区分大小写</label>
</div>
</div>
<div class="form-group">
<label for="repassword" class="col-sm-2 control-label">再输一次：</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="repassword" name="repassword">
</div>
</div>
<div class="form-group">
<label for="nickname" class="col-sm-2 control-label">昵称：</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="nickname"
name="nickname">
</div>
</div>
<div class="form-group">
<label for="realname" class="col-sm-2 control-label">真实姓名：</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="realname"
name="realname" placeholder="输入真实姓名">
</div>
<div style="display: inline">
<label class="help-block">真实姓名</label>
</div>
</div>
<div class="form-group">
<label for="sex" class="col-sm-2 control-label">性别：</label>
<div class="col-sm-4">
<input type="radio" name="sex" id="sex_m" value="男"
checked="checked"> 男
<input type="radio" name="sex" id="sex_w" value="女">
女
</div>
</div>
<div class="form-group">
<label for="IdentificationCard" class="col-sm-2 control-label">身份证号：</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="IdentificationCard"
name="IdentificationCard">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email：</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="email" name="email"
placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="address" class="col-sm-2 control-label">地址：</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="address" name="address">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-3">
<div class="checkbox">
<label><input type="checkbox">我已阅读并接受</label> <a href="#"
style="text-decoration: underline;" target="_blank">注册条款</a>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<button type="submit" class="btn btn-warning btn-lg btn-block">提
交 注 册</button>
</div>
</div>
</form>
</body>
</html>
1 其中如果name的值带. 如 bonus.bonus ，则在js中给它两边加上引号即可。
2 其中 <label for="address" 中 for填入的是后面组件的id
参考：https://www.cnblogs.com/v-weiwang/p/4834672.html?ptvd
91
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
