当前位置：首页 > news >正文

【JavaWeb】日程管理02——注册页及数据校验功能

news 2026/6/11 12:06:16

框架代码如下：

<!DOCTYPE html><head lang="en"><meta charset="UTF-8"><title>title</title><style>.ht{text-align:center;color:#9F7AEA;font-family:幼圆;}.tab{width:500px;border:5px solid #7472FE;margin:0px auto;border-radius:5px;font-family:幼圆;}.ltr td{border:1px solid #B3B1FC;}.ipt{border:0px;width:50%;background-color:#F5F3FF;padding:2px4px;}.btn1{border:2px solid #7472FE;border-radius:4px;width:60px;background-color:#9F7AEA20;color:#4A26B3;cursor:pointer;}.msg{color:gold;}.buttonContainer{text-align:center;}</style></head><body><h1 class="ht">欢迎使用日程管理系统</h1><h3 class="ht">请注册</h3><form method="post"action="/user/regist"onsubmit="return checkForm()"><table class="tab"cellspacing="0px"><tr class="ltr"><td>请输入账号</td><td><input class="ipt"id="usernameInput"type="text"name="username"onblur="checkUsername()"><span id="usernameMsg"class="msg"></span></td></tr><tr class="ltr"><td>请输入密码</td><td><input class="ipt"id="userPwdInput"type="password"name="userPwd"onblur="checkUserPwd()"><span id="userPwdMsg"class="msg"></span></td></tr><tr class="ltr"><td>确认密码</td><td><input class="ipt"id="reUserPwdInput"type="password"onblur="checkReUserPwd()"><span id="reUserPwdMsg"class="msg"></span></td></tr><tr class="ltr"><td colspan="2"class="buttonContainer"><input class="btn1"type="submit"value="注册"><input class="btn1"type="reset"value="重置"><button class="btn1"><a href="/login.html">去登录</a></button></td></tr></table></form></body></html>

校验账号

校验密码

校验第二次输入的密码

完整代码如下

<!DOCTYPE html><head lang="en"><meta charset="UTF-8"><title>title</title><style>.ht{text-align:center;color:#9F7AEA;font-family:幼圆;}.tab{width:500px;border:5px solid #7472FE;margin:0px auto;border-radius:5px;font-family:幼圆;}.ltr td{border:1px solid #B3B1FC;}.ipt{border:0px;width:50%;background-color:#F5F3FF;padding:2px4px;}.btn1{border:2px solid #7472FE;border-radius:4px;width:60px;background-color:#9F7AEA20;color:#4A26B3;cursor:pointer;}.msg{color:gold;}.buttonContainer{text-align:center;}</style><script>functioncheckUsername(){var usernameReg=/^[a-zA-Z0-9]{5,10}$/var usernameInput=document.getElementById("usernameInput")var username=usernameInput.value var usernameMsg=document.getElementById("usernameMsg")if(!usernameReg.test(username)){usernameMsg.innerText="输入格式错误"returnfalse}usernameMsg.innerText="OK"returntrue}functioncheckUserPwd(){var passwordReg=/^[0-9]{6}$/var userPwdInput=document.getElementById("userPwdInput")var userPwd=userPwdInput.value var userPwdMsg=document.getElementById("userPwdMsg")if(!passwordReg.test(userPwd)){userPwdMsg.innerText="密码格式不对"returnfalse}userPwdMsg.innerText="OK"returntrue}functioncheckReUserPwd(){var userPwd=document.getElementById("userPwdInput").value var reUserPwd=document.getElementById("reUserPwdInput").value var reUserPwdReg=/^[0-9]{6}$/var reUserPwdMsg=document.getElementById("reUserPwdMsg")if(!reUserPwdReg.test(reUserPwd)){reUserPwdMsg.innerText="密码有问题"returnfalse}if(userPwd!=reUserPwd){reUserPwdMsg.innerText="两次输入不一致"returnfalse}reUserPwdMsg.innerText="OK"returntrue}functioncheckForm(){var flag1=checkUsername()var flag2=checkUserPwd()var flag3=checkReUserPwd()returnflag1&&flag2&&flag3}</script></head><body><h1 class="ht">欢迎使用日程管理系统</h1><h3 class="ht">请注册</h3><form method="post"action="/user/regist"onsubmit="return checkForm()"><table class="tab"cellspacing="0px"><tr class="ltr"><td>请输入账号</td><td><input class="ipt"id="usernameInput"type="text"name="username"onblur="checkUsername()"><span id="usernameMsg"class="msg"></span></td></tr><tr class="ltr"><td>请输入密码</td><td><input class="ipt"id="userPwdInput"type="password"name="userPwd"onblur="checkUserPwd()"><span id="userPwdMsg"class="msg"></span></td></tr><tr class="ltr"><td>确认密码</td><td><input class="ipt"id="reUserPwdInput"type="password"onblur="checkReUserPwd()"><span id="reUserPwdMsg"class="msg"></span></td></tr><tr class="ltr"><td colspan="2"class="buttonContainer"><input class="btn1"type="submit"value="注册"><input class="btn1"type="reset"value="重置"><button class="btn1"><a href="login.html">去登录</a></button></td></tr></table></form></body></html>