用户注册及自定义校验
程序员文章站
2022-05-07 15:50:25
...
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/CA/bootstrap/css/bootstrap.min.css" />
</head>
<body>
<jsp:include page="nav.jsp" />
<div style="width: 400px;height: 200px;"></div>
<div class="container">
<div class="col-md-6 col-md-offset-3">
<form action="#" class="">
<div class="form-group has-feedback">
<label for="username">用户名</label>
<div class="input-group">
<span class="input-group-addon"><span
class="glyphicon glyphicon-user"></span></span> <input id="username"
class="form-control" placeholder="请输入用户名" maxlength="20"
type="text"> <span id="usernameMsg"></span>
</div>
<span style="color: red; display: none;" class="tips"></span> <span
style="display: none;"
class=" glyphicon glyphicon-remove form-control-feedback"></span>
<span style="display: none;"
class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<label for="password">密码</label>
<div class="input-group">
<span class="input-group-addon"><span
class="glyphicon glyphicon-lock"></span></span> <input id="password"
class="form-control" placeholder="请输入密码" maxlength="20"
type="password"> <span id="passwordMsg"></span>
</div>
<span style="color: red; display: none;" class="tips"></span> <span
style="display: none;"
class="glyphicon glyphicon-remove form-control-feedback"></span> <span
style="display: none;"
class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<label for="passwordConfirm">确认密码</label>
<div class="input-group">
<span class="input-group-addon"><span
class="glyphicon glyphicon-lock"></span></span> <input id="repassword"
class="form-control" placeholder="请再次输入密码" maxlength="20"
type="password"> <span id="repasswordMsg"></span>
</div>
<span style="color: red; display: none;" class="tips"></span> <span
style="display: none;"
class="glyphicon glyphicon-remove form-control-feedback"></span> <span
style="display: none;"
class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<label for="phoneNum">手机号码</label>
<div class="input-group">
<span class="input-group-addon"><span
class="glyphicon glyphicon-phone"></span></span> <input id="phoneNum"
class="form-control" placeholder="请输入手机号码" maxlength="11"
type="text"> <span id="phoneNumMsg"></span>
</div>
<span style="color: red; display: none;" class="tips"></span> <span
style="display: none;"
class="glyphicon glyphicon-remove form-control-feedback"></span> <span
style="display: none;"
class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group">
<input class="form-control btn btn-primary" id="submit"
value="立 即 注 册" type="submit"
onclick="return checkForm()">
</div>
<div class="form-group">
<input value="重置" id="reset" class="form-control btn btn-danger"
type="reset">
</div>
</form>
</div>
</div>
<div style="width: 400px;height: 200px;"></div><!--暂时先写个div，解决办法在java收藏里 -->
<div id="bot_nav" style="height: 20%; background: rgb(51, 51, 51);margin-bottom: 10px;">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div style="text-align: center; color: white;">
<h4>
<b>大学生闲置物品拍卖平台</b>
</h4>
<p></p>
<div>
<h5>快速出手</h5>
<h5>二次利用</h5>
<h5>公平公正</h5>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div style="text-align: center; color: white;">
<h4>
<b>用户导航</b>
</h4>
<ul>
<li><a href="mycount.jsp">我的账户</a></li>
<li><a href="orderForm.jsp">订单记录</a></li>
<li><a href="#">服务方联系人</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div style="text-align: center; color: white;">
<h4>
<b>种类</b>
</h4>
<ul>
<li><a href="#">手机</a></li>
<li><a href="#">衣服/鞋子</a></li>
<li><a href="#">书本</a></li>
<li><a href="#">电脑及配件</a></li>
<li><a href="#">玩具</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div style="text-align: center; color: white;">
<h4>
<b>反馈建议</b>
</h4>
<p></p>
<div class="newsletter-form">
<form action="#">
<input type="email" placeholder="Type your email"> <input
type="submit" value="Subscribe">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//校验表单
function checkForm() {
//清空span标签内容，是为了第二次输入时不显示上次的提示信息
//获取标签体对象
var u_msg = document.getElementById("usernameMsg");
u_msg = "";
var p_msg = document.getElementById("passwordMsg");
p_msg = "";
var rep_msg = document.getElementById("repasswordMsg");
rep_msg = "";
var pn_msg = document.getElementById("PhoneNumMsg");
pn_msg = "";
//逐个验证是否为空
var f1 = checkIsNotNull("username", "用户名");
var f2 = checkIsNotNull("password", "密码");
var f3 = checkIsNotNull("repassword", "确认密码");
var f4 = checkIsNotNull("phoneNum", "手机号");
//两次密码是否一致
if (f2 && f3) {
var p_val = document.getElementById("password").value;
var rep_val = document.getElementById("repassword").value;
//获取标签体对象
var msg = document.getElementById("repasswordMsg");
if (p_val != rep_val) {
msg.innerHTML = "<font color='red'>两次密码必须一致</font>"
return false;
}
}
return f1 && f2 && f3 && f4;
}
//校验
function checkIsNotNull(id, msg) {
var ver = /^\s*$/;//校验用户名不能为空
var u_val = document.getElementById(id).value;//根据id获取username的值
var u_msg = document.getElementById(id + "Msg");//获取span标签体对象,标签体的id都以Msg结尾
if (ver.test(u_val)) {//如果用户名为空就设置span标签里的值
//设置内容体
u_msg.innerHTML = "<font color='red'>" + msg + "不能为空</font>"
return false;
}
return true;
}
</script>
</body>
</html>
上一篇： java 学习之联接 Mysql