页面的构建简单地应用了bootstrap,通过js代码实现了注册表单的验证功能。代码如下:
<!DOCTYPE html>
<html>
<head>
<title>用户注册</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!-- 用于适应不同设备 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- bootstrap 样式表 -->
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
var flag = {
"email":false,
"username":false,
"nickname":false,
"password":false,
};
$(function(){
// email验证
$("#txtEmail").blur(function(){
var email = $(this).val();
var pattern=/\b(^['_A-Za-z0-9-]+(\.['_A-Za-z0-9-]+)*@([A-Za-z0-9-])+(\.[A-Za-z0-9-]+)*((\.[A-Za-z0-9]{2,})|(\.[A-Za-z0-9]{2,}\.[A-Za-z0-9]{2,}))$)\b/;
if(!pattern.test(email)){
$("#email\\.info").html("Email格式不正确");
return;
}else{
$("#email\\.info").html("");
flag.email = true;
}
// 邮箱重复校验
});
$("#txtUserName").blur(function(){
// 用户名校验
var username = $(this).val();
// 校验规则,可调整
var pattern = /\b(^['A-Za-z0-9]{4,20}$)\b/;
if(!pattern.test(username)){
$("#username\\.info").html("用户名不合法");
return;
}else{
$("#username\\.info").html("");
flag.username = true;
}
});
$("#txtNickName").blur(function(){
// 昵称校验
var nickname = $(this).val();
// 校验规则,可调整
var pattern = /\b(^['A-Za-z0-9]{4,20}$)\b/;
if(!pattern.test(nickname)){
$("#nickname\\.info").html("昵称不合法");
return;
}else{
$("#nickname\\.info").html("");
flag.nickname = true;
return;
}
});
// 密码校验
$("#txtPassword").blur(function(){
var password=$(this).val();
var pattern = /\b(^['A-Za-z0-9]{4,20}$)\b/;
if (!pattern.test(password)) {
$("#password\\.info").html("密码格式不正确");
return;
}else{
$("#password\\.info").html("");
//flag.password=true;
return;
}
});
// 密码重复校验
$("#txtRepeatPass").blur(function(){
var repeatPass = $(this).val();
var pattern = /\b(^['A-Za-z0-9]{4,20}$)\b/;
if (repeatPass!=$("#txtPassword").val()) {
$("#repeatPass\\.info").html("两次密码输入不一致");
return;
}else{
$("#repeatPass\\.info").html("");
flag.password = true;
return;
}
});
$("#form").submit(function(){
var ok = flag.email&&flag.password&&flag.nickname;
if(ok==false){
alert("表单项正在检测或存在错误");
history.back();
return false;
}
return true;
});
})
</script>
</head>
<body style="padding-top:50px;">
<form class="form-horizontal" role="form" method="post" id="form">
<div class="form-group">
<label for="uname" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="txtUserName" name="username"
placeholder="请输入用户名" required>
<span id="username.info" style="color:red"></span>
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">注册邮箱</label>
<div class="col-sm-6">
<input name="email" type="text" class="form-control" id="txtEmail"
placeholder="请输入注册邮箱" required>
<span id="email.info" style="color:red"></span>
</div>
</div>
<div class="form-group">
<label for="nickname" class="col-sm-2 control-label">昵称</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="nickname" id="txtNickName"
placeholder="请输入昵称" required>
<span id="nickname.info" style="color:red"></span>
</div>
</div>
<div class="form-group">
<label for="passwd" class="col-sm-2 control-label">密码</label>
<div class="col-sm-6">
<input type="password" class="form-control" name="password" id="txtPassword"
placeholder="请输入密码" required>
<span id="password.info" style="color:red"></span>
</div>
</div>
<div class="form-group">
<label for="repeatPass" class="col-sm-2 control-label">重复密码</label>
<div class="col-sm-6">
<input type="password" class="form-control" name="repeatPass" id="txtRepeatPass"
placeholder="请再次输入密码" required>
<span id="repeatPass.info" style="color:red"></span>
</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>
</body>
</html>