哈喽~大家好呀，上一次呢我们实现了简单的登入注册界面，并连接了数据库。有很多小伙伴说 “你这登入的账号密码太简单了，我轻轻轻松就能猜到你的账号和密码”，所以为了我们的安全性，让我们这界面一步一步完善。废话少说，下面我们来看看效果图吧。
简单来说的话就是，在登入那一块加了一个用户与密码格式验证（在我们注册是账户密码通常是 6 ~ 12 位的）。接下来我们来看看代码是怎样实现的（连接数据库与页面是如何实现的可以看之前写的文章）。
实现思路
有一段文本，属性隐藏，当我们鼠标点击框时（点击事件）来验证输入的长度，如果符合就继续隐藏，如果不符合就取消隐藏。
1、设置用户名与密码的 id 值
2、写入文本 id 值与属性
3、JavaScript 实现
实现步骤
1、设置用户名与密码的 id 值
<input type="text" placeholder="姓名" name="user" id="user"> <input type="password" placeholder="密码" name="pass" id="pass">
2、写入文本 id 值与属性
<span id="username_err" class="err_msg" style="display: none; color: red;padding-right: 170px;">用户名格式有误</span> <span id="password_err" class="err_msg" style="display: none; color: red;padding-right: 200px;">密码格式有误</span>
3、JavaScript 实现
// setTimeout(function () { // alert("三秒后跳转到首页，请稍后……") // location.href = "login.jsp" // }, 3000) var usernameInput = document.getElementById("user"); // 获取 id 属性 usernameInput.onblur = checkUsername; // 获取触发事件 function checkUsername() { // 检查用户名框 var username = usernameInput.value.trim(); // trim 作用用来吃空格 var flag = username.length >= 6 && username.length <= 12; if (flag) { document.getElementById("username_err").style.display = 'none'; // 隐藏 } else { document.getElementById("username_err").style.display = ''; // 取消隐藏 } return flag; // 返回真假 } var passwordInput = document.getElementById("pass"); passwordInput.onblur = checkPassword; function checkPassword() {// 检查密码框 var password = passwordInput.value.trim(); var flag = password.length >= 6 && password.length <= 12; if (flag) { document.getElementById("password_err").style.display = 'none'; } else { document.getElementById("password_err").style.display = ''; } return flag; // 返回真假 } var regForm = document.getElementById("reg-form"); // 获取提交的 id 值 regForm.onsubmit = function () { var flag = checkPassword() && checkUsername(); // 做判断，如果 两个框都没有问题（都为真的情况下，那么才能提交上去） return flag; }
点击运行，ok，完成。
