案例开发 - 日程管理系统 - 第一期
目录
登录及校验
注册及校验
登录及校验
代码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>登录页面</title><style>.ht {font-family:"隶书";text-align: center;color: rgb(70, 214, 214);}.tab {width: 500px;border: 5px solid rgb(15, 97, 97);margin: 0px auto;border-radius: 5px;font-family: "隶书";/* 用于设置单元格边框与边框之间的空白距离 */border-spacing: 0px;}/* .ltr td 是一种组合选择器的写法 表示选中所有属于 .ltr 元素后代的 <td> 标签 */.ltr td {border: 1px solid powderblue;}.ipt {border: 0px;width: 50%;}.btn1 {border: 2px solid gainsboro;border-radius: 4px;width: 60px;background-color: antiquewhite;}/* id 选择器 */#usernameMsg,#userPwdMsg {color: rgb(243, 65, 21);}.buttonContainer{text-align: center;}</style><script>// 检验用户名格式是否合法的函数function checkUsername() {// 定义正则表达式来表示字符串的规则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 = "用户名格式错误";return false;}// 如果格式正确usernameMsg.innerText = "ok";return true;}// 检验用户密码格式是否合法的函数function checkUserPwd() {// 定义正则表达式来表示字符串的规则var userPwdReg = /^[0-9]{6}$/;// 获取用户在页面上输入的信息var usernameInput = document.getElementById("userPwdInput");var userPwd = usernameInput.value;// 获得格式提示的框var userPwdMsg = document.getElementById("userPwdMsg");// 判断是否格式有误if (!userPwdReg.test(userPwd)) {userPwdMsg.innerText = "用户密码格式有误";return false;}userPwdMsg.innerText = "ok";return true;}// 表单在提交时，需要先验证用户的用户名和密码，格式正确才会提交function checkForm() {var flg1 = checkUsername();var flg2 = checkUserPwd();return flg1 && flg2;}</script></head><body><h1 class="ht">欢迎使用日程管理系统</h1><h3 class="ht">请登录</h3><form method="post" action="user/login" onsubmit="return checkForm()"><table class="tab"><tr class="ltr"><td>请输入账号</td><td><inputclass="ipt"type="text"id="usernameInput"name="username"onblur="checkUsername()"/><!-- span 标签相当于一个占位符，用于后续动态填充内容或者修改样式 --><span id="usernameMsg"></span></td></tr><tr class="ltr"><td>请输入密码</td><td><inputclass="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>
效果如下：
注册及校验
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>注册页面</title><style>/* 设置标题样式 */.ht {font-family: "隶书";text-align: center;color: rgb(70, 214, 214);}.tab {width: 500px;border: 5px solid rgb(15, 97, 97);margin: 0px auto;border-radius: 5px;font-family: "隶书";/* 用于设置单元格边框与边框之间的空白距离 */border-spacing: 0px;}/* .ltr td 是一种组合选择器的写法 表示选中所有属于 .ltr 元素后代的 <td> 标签 */.ltr td {border: 1px solid powderblue;}.ipt {border: 0px;/* width:50px 的意思是 设置元素的宽度为父容器宽度的 50% */width: 50%;}.btn1 {border: 2px solid gainsboro;border-radius: 4px;width: 60px;background-color: antiquewhite;}.msg {color: rgb(243, 65, 21);}.buttonContainer {text-align: center;}</style><script>// 检查注册的用户名格式的函数function checkUsername() {// 定义正则表达式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 = "用户名格式错误";return false;}usernameMsg.innerText = "ok";return true;}// 检查注册的用户密码格式的函数function checkUserPwd() {// 定义正则表达式var userPwdReg = /^[0-9]{6}$/;// 获取用户输入的密码var userPwdInput = document.getElementById("userPwdInput");var userPwd = userPwdInput.value;// 获取格式提示的框var userPwdMsg = document.getElementById("userPwdMsg");// 检验格式if(!userPwdReg.test(userPwd)) {userPwdMsg.innerText = "用户密码格式错误";return false;}userPwdMsg.innerText = "ok";return true;}// 验证注册的用户确认密码格式的函数function checkReUserPwd() {// 定义正则表达式var reUserPwdReg = /^[0-9]{6}$/;// 获取用户在此输入的密码var reUserPwdInput = document.getElementById("reUserPwdInput");var reUserPwd = reUserPwdInput.value;// 获取格式提示的框var reUserPwdMsg = document.getElementById("reUserPwdMsg");// 格式验证if(!reUserPwdReg.test(reUserPwd)) {reUserPwdMsg.innerText = "再次输入的密码格式有误";return false;}// 获取第一次输入的密码，对比两次密码是否一致var userPwdInput = document.getElementById("userPwdInput");var userPwd = userPwdInput.value;if(reUserPwd != userPwd) {reUserPwdMsg.innerText = "两次密码不一致";return false;}reUserPwdMsg.innerText = "ok"return true}// 表单在提交时，需要先验证用户的用户名和密码，格式正确才会提交function checkForm() {var flg1 = checkUsername();var flg2 = checkUserPwd();var flg3 = checkReUserPwd();return flg1 && flg2 && flg3;}</script>
</head><body><h1 class="ht">欢迎使用日程管理系统</h1><h3 class="ht">请注册</h3><form method="post" action=user/regist onsubmit="return checkForm()"><table class="tab"><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" name="reUserPwd" 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>效果如下：
