bootstrap实现注册和注册的验证
首先你需要学习bootstrap中与表单有关的知识，其次需要了解JS组件系列——Form表单验证神器 BootstrapValidator
bootstrap中文官网
bootstrapvalidator源码
话不多说，直接上代码
html+css部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>register</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<style type="text/css">
.form{
border-radius: 50px;
background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
}
a:hover{
text-decoration: none;
color: red;
}
</style>
</head>
<body>
<div class="container" style="margin-top: 180px;">
<form id="addUserForm" class="col-sm-offset-4 col-sm-4 col-sm-offset-4 form form-horizontal" action="#" method="post">
<h3 class="text-center">用户注册</h3>
<!--把标签和控件放在一个from-group的div中-->
<div class="form-group">
<label for="username" class="col-sm-4 control-label">账<span> </span>号</label>
<div class="col-sm-7">
<input class="form-control" type="text" name="userName" id="username" placeholder="由2-12个字符组成" />
</div>
<div class="col-sm-1">
</div>
</div>
<div class="form-group">
<label for="psw" class="col-sm-4 control-label">密<span> </span>码</label>
<div class="col-sm-7">
<input class="form-control" type="password" name="userPassword" id="psw" placeholder="由6-18个字符组成" />
</div>
<div class="col-sm-1">
</div>
</div>
<div class="form-group">
<label for="psw" class="col-sm-4 control-label">确认密码</label>
<div class="col-sm-7">
<input class="form-control" type="password" name="userPassword2" id="psw" placeholder="再次确认密码" />
</div>
<div class="col-sm-1">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-4 control-label">邮<span> </span>箱</label>
<div class="col-sm-7">
<input name="userEmail" class="form-control" type="email" name="userEmail" id="email" placeholder="例如:123@123.com">
</div>
<div class="col-sm-1">
</div>
</div>
<button type="submit" class="btn btn-success col-sm-12">注册</button>
<div class="text-right" style="margin-bottom: 20px;">
<a href="login.html">已有账号？立即登录</a>
</div>
</form>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrapValidator.min.js"></script>
<script src="js/form.js"></script>
</body>
</html>
背景图片的来源 https://webgradients.com 这个网站力推，太美了!
js部分代码（记得要把bootstrap的图标字体文件复制到项目的fonts文件中哦）
//注册表单验证
$(function () {
//表单的id
$('#addUserForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
userName: {
message: '用户名验证失败',
validators: {
notEmpty: {
message: '用户名不能为空'
},stringLength: {
min: 2,
max: 12,
message: '2-12位字母或数字'
}
}
},
userPassword: {
validators: {
notEmpty: {
message: '密码不能为空'
},stringLength: {
min: 6,
max: 18,
message: '6-18位字母或数字'
},identical: {
field: 'userPassword2',
message: '请保持密码一致'
}
}
},
userPassword2: {
validators: {
notEmpty: {
message: '请再次输入密码'
},stringLength: {
min: 6,
max: 18,
message: '6-18位字母或数字'
},identical: {
field: 'userPassword',
message: '请保持密码一致'
}
}
},
userEmail: {
validators: {
notEmpty: {
message: '邮箱不能为空'
},
emailAddress: {
message: '非法邮箱格式'
}
}
}
}
});
});
效果图
中间如有细节错误实属抱歉，请自行改正
2066
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
