关于登入界面提示实践案例（JSP + JavaScript）

目录

实现思路

实现步骤

---

哈喽~大家好呀，上一次呢我们实现了简单的登入注册界面，并连接了数据库。有很多小伙伴说 “你这登入的账号密码太简单了，我轻轻轻松就能猜到你的账号和密码”，所以为了我们的安全性，让我们这界面一步一步完善。废话少说，下面我们来看看效果图吧。

 个人主页：个人主页​​​​​

 系列专栏：【前端】

与这篇界面相关的文章：

JDBC 连接 MySQL	不会吧不会吧，这博主居然用了1.6w+字来讲 JDBC 连接 MySQL，还花了好几个晚上写出来的_一个名叫追的程序猿的博客-CSDN博客
侧边导航栏（抽屉式设计）界面 (html + css)	侧边导航栏（抽屉式设计）界面 (html + css)_一个名叫追的程序猿的博客-CSDN博客_html5抽屉式菜单
学习 JQuery 的第二天（选择器篇）	学习 JQuery 的第二天（选择器篇）_一个名叫追的程序猿的博客-CSDN博客

​

简单来说的话就是，在登入那一块加了一个用户与密码格式验证（在我们注册是账户密码通常是 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，完成。

（求关注）持续更新中……