代码如下
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
</head>
<body>
<style>
#div1{
width:400px;
border:1px solid black;
}
span{
color: red;
}
</style>
<div id="div1">
<h1>用户信息注册</h1>
<form action="" onsubmit="return check()">
用户名:<input onblur="usernameCheck()" id="username" name="username" type="text" placeholder="请输入用户名"><span id="usernameSpan"></span><br>
密码:<input onblur="password1Check()" id="password1" name="password" type="text" placeholder="请输入密码"><span id="password1Span"></span><br>
确认密码:<input onblur="password2Check()" id="password2" name="password2" type="text" placeholder="请再次确认密码"><span id="password2Span"></span><br>
<!-- 单选框 -->
<div>性别:
<label><input type="radio" checked="checked" name="sex" value="男生">男生</label>
<label><input type="radio" name="sex" value="女生">女生</label>
</div>
<br>
手机号:<input onblur="numberCheck()" id="number" name="number" type="text" placeholder="请输入手机号"><span id="numberSpan"></span><br>
E-mail:<input onblur="emailCheck()" id="email" name="email" type="email" placeholder="请输入邮箱"><span id="emailSpan"></span><br>
<!-- 单选框 -->
<div>专业:
<label><input type="radio" checked="checked" name="major" value="计科大数据">计科大数据</label>
<label><input type="radio" name="major" value="软件工程">软件工程</label>
<label><input type="radio" name="major" value="物联网">物联网</label>
</div>
<br>
<!-- 单选框 -->
<div>政治面貌:
<label><input type="radio" checked="checked" name="politics" value="党员">党员</label>
<label><input type="radio" name="politics" value="团员">团员</label>
<label><input type="radio" name="politics" value="群众" >群众</label>
</div>
<input type="button" onclick="check()" value="提交"><input value="取消" type="reset">
</form>
</div>
</body>
<script type="text/javascript">
function usernameCheck() {
var username = document.getElementById("username");
var username = document.getElementById("username").value;
username = username.replace(/\s*/g,"");// 去除空格 防止用户误点
if(username == ""){
document.getElementById("usernameSpan").innerText="用户名不能为空";
}
}
function password1Check() {
var password1 = document.getElementById("password1");
var password1 = document.getElementById("password1").value;
password1 = password1.replace(/\s*/g,"");
if (password1.length < 6){
document.getElementById("password1Span").innerText="密码至少六位";
}
}
function password2Check() {
var password2 = document.getElementById("password2");
var password2 = document.getElementById("password2").value;
password2= password2.replace(/\s*/g,"");
if (password2.length < 6){
document.getElementById("password2Span").innerText="密码至少六位";
}
}
function numberCheck() {
var number = document.getElementById("number"); //要验证的对象
if(!(/^1[34578]\d{9}$/.test(number.value))){
document.getElementById("numberSpan").innerText="手机号码有误,请重填";
}
}
function emailCheck() {
var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
var obj = document.getElementById("email"); //要验证的对象
if(obj.value === ""){ //输入不能为空
document.getElementById("emailSpan").innerText="输入不能为空";
}else if(!reg.test(obj.value)){ //正则验证不通过,格式不对
document.getElementById("emailSpan").innerText="正则验证不通过,邮箱格式不对";
}
}
function check(){
//获取控件内容
var username = document.getElementById("username").value;
var password1 = document.getElementById("password1").value;
var password2 = document.getElementById("password2").value;
var number = document.getElementById("number").value;
username = username.replace(/\s*/g,"");// 去除空格 防止用户误点
password1 = password1.replace(/\s*/g,"");
password2 = password2.replace(/\s*/g,"");
number = number.replace(/\s*/g,"");
if(username == ""){
alert("用户名不能为空");
document.getElementById("usernameSpan").innerText="";
document.getElementById("username").focus();//获取焦点
return false;
}
if(password1 == ""){
alert("密码不能为空");
document.getElementById("password1Span").innerText="";
document.getElementById("password1").focus();
return false;
}
if(password2 == ""){
alert("密码不能为空");
document.getElementById("password2Span").innerText="";
document.getElementById("password2").focus();
return false;
}
if (password1.length < 6){
alert("密码至少六位");
document.getElementById("password1Span").innerText="";
document.getElementById("password1").focus();
return false;
}
if (password2.length < 6){
alert("密码至少六位");
document.getElementById("password2Span").innerText="";
document.getElementById("password2").focus();
return false;
}
if (password1.valueOf() != password2.valueOf()){
alert("前后密码不一致");
document.getElementById("password2").focus();
return false;
}
if(!(/^1[34578]\d{9}$/.test(number))){
alert("电话号码格式不对");
document.getElementById("numberSpan").innerText="";
document.getElementById("number").focus();
return false;
}
var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
var obj = document.getElementById("email"); //要验证的对象
if(obj.value === ""){ //输入不能为空
alert("邮箱输入不能为空");
document.getElementById("emailSpan").innerText="";
document.getElementById("email").focus();
return false;
}else if(!reg.test(obj.value)){ //正则验证不通过,格式不对
alert("正则验证不通过,格式不对");
document.getElementById("emailSpan").innerText="";
document.getElementById("email").focus();
return false;
}
//验证成功
alert("提交成功!")
return true;
}
</script>
</html>