框架代码如下
<!DOCTYPE html><html lang="en"><head><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;}.ipt:focus{outline:1px solid #7472FE;background-color:#FFFFFF;}.btn1{border:2px solid #7472FE;border-radius:4px;width:60px;background-color:#9F7AEA20;color:#4A26B3;cursor:pointer;}.btn1:hover{background-color:#7472FE;color:white;}.btn1 a{color:inherit;text-decoration:none;}#usernameMsg,#userPwdMsg{color:#E53E3E;font-size:12px;}.buttonContainer{text-align:center;}</style></head><body><h1 class="ht">欢迎使用日程管理系统</h1><h3 class="ht">请登录</h3><form method="post"action="/user/login"onsubmit="return checkForm()"><table class="tab"cellspacing="0px"><tr class="ltr"><td>请输入账号</td><td><input class="ipt"type="text"id="usernameInput"name="username"onblur="checkUsername()"><span id="usernameMsg"></span></td></tr><tr class="ltr"><td>请输入密码</td><td><input class="ipt"type="password"id="userPwdInput"name="userPwd"onblur="checkUserPwd()"><span id="userPwdMsg"></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="regist.html">去注册</a></button></td></tr></table></form></body></html>对账号进行校验
检验密码
表单在提交时，校验用户名和密码格式，格式OK才会提交
完整代码如下
<!DOCTYPE html><html lang="en"><head><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;}.ipt:focus{outline:1px solid #7472FE;background-color:#FFFFFF;}.btn1{border:2px solid #7472FE;border-radius:4px;width:60px;background-color:#9F7AEA20;color:#4A26B3;cursor:pointer;}.btn1:hover{background-color:#7472FE;color:white;}.btn1 a{color:inherit;text-decoration:none;}#usernameMsg,#userPwdMsg{color:#E53E3E;font-size:12px;}.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")// 格式有误时，返回false，在页面上提示if(!usernameReg.test(username)){usernameMsg.innerText="格式不对"returnfalse}// 格式OK，返回true，在页面上提示 OKusernameMsg.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}// 表单在提交时，校验用户名和密码格式，格式OK才会提交functioncheckForm(){var flag1=checkUsername()var flag2=checkUserPwd()returnflag1&&flag2}</script></head><body><h1 class="ht">欢迎使用日程管理系统</h1><h3 class="ht">请登录</h3><form method="post"action="/user/login"onsubmit="return checkForm()"><table class="tab"cellspacing="0px"><tr class="ltr"><td>请输入账号</td><td><input class="ipt"type="text"id="usernameInput"name="username"onblur="checkUsername()"><span id="usernameMsg"></span></td></tr><tr class="ltr"><td>请输入密码</td><td><input class="ipt"type="password"id="userPwdInput"name="userPwd"onblur="checkUserPwd()"><span id="userPwdMsg"></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="regist.html">去注册</a></button></td></tr></table></form></body></html>
