bootstrap注册表单
时间: 2023-12-02 15:42:42 浏览: 46
以下是一个基于BootstrapValidator的Bootstrap注册表单模板,包含注册、手动验证、表单重置等功能:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap注册表单</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2>注册</h2>
<form id="registerForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">用户名</label>
<div class="col-md-9">
<input type="text" class="form-control" name="username" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">密码</label>
<div class="col-md-9">
<input type="password" class="form-control" name="password" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">确认密码</label>
<div class="col-md-9">
<input type="password" class="form-control" name="confirmPassword" placeholder="请再次输入密码">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">邮箱</label>
<div class="col-md-9">
<input type="email" class="form-control" name="email" placeholder="请输入邮箱">
</div>
</div>
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<button type="submit" class="btn btn-primary">注册</button>
<button type="reset" class="btn btn-default">重置</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<script>
$(document).ready(function() {
$('#registerForm').bootstrapValidator({
message: '输入值无效',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
message: '用户名无效',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '用户名只能包含字母、数字、下划线和点号'
}
}
},
password: {
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '密码长度必须在6到30之间'
},
identical: {
field: 'confirmPassword',
message: '两次输入的密码不一致'
}
}
},
confirmPassword: {
validators: {
notEmpty: {
message: '确认密码不能为空'
},
identical: {
field: 'password',
message: '两次输入的密码不一致'
}
}
},
email: {
validators: {
notEmpty: {
message: '邮箱不能为空'
},
emailAddress: {
message: '请输入有效的邮箱地址'
}
}
}
}
});
});
</script>
</body>
</html>
```