关于登入界面提示实践案例(JSP + JavaScript)

简介: 有一段文本,属性隐藏,当我们鼠标点击框时(点击事件)来验证输入的长度,如果符合就继续隐藏,如果不符合就取消隐藏。


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

image.png

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

image.gif

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>

image.gif

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;
}

image.gif

点击运行,ok,完成。


相关文章
|
4月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
5月前
|
前端开发 JavaScript Java
【Java进阶】JavaScript电灯开关实例:从理论到实践
这个例子展示了JavaScript的基本功能,包括操作HTML元素,监听事件,以及改变元素的样式。通过学习和理解这个例子,你可以了解到JavaScript在网页中的应用,以及如何使用JavaScript来创建交互式的网页。
104 13
|
4月前
|
人工智能 监控 前端开发
基于 Next.js 的书法字体生成工具架构设计与 SSR 优化实践
本项目是一款书法字体生成工具,采用 Next.js 14(App Router)与 Tailwind CSS 构建前端,阿里云 Serverless 部署后端。通过混合渲染策略(SSG/SSR/CSR)、Web Worker 异步计算及 CDN 字体分片加载优化性能。服务端借助阿里云函数计算处理计算密集型任务,将平均耗时从 1200ms 降至 280ms,支持 1000+ QPS。动态路由与 ARMS 监控提升工程化水平,未来计划引入 WebGPU 和 AI 字体风格迁移技术,进一步优化用户体验。
|
6月前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
6月前
|
监控 JavaScript 前端开发
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
MutationObserver 是一个非常强大的 API,提供了一种高效、灵活的方式来监听和响应 DOM 变化。它解决了传统 DOM 事件监听器的诸多局限性,通过异步、批量的方式处理 DOM 变化,大大提高了性能和效率。在实际开发中,合理使用 MutationObserver 可以帮助我们更好地控制 DOM 操作,提高代码的健壮性和可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
|
7月前
|
JavaScript 前端开发 索引
40个JS常用使用技巧案例
大家好,我是V哥。在日常开发中,JS是解决页面交互的利器。V哥总结了40个实用的JS小技巧,涵盖数组操作、对象处理、函数使用等,并附带案例代码和解释。从数组去重到异步函数,这些技巧能显著提升开发效率。先赞再看后评论,腰缠万贯财进门。关注威哥爱编程,全栈开发就你行!
212 16
|
6月前
|
缓存 自然语言处理 JavaScript
JavaScript中闭包详解+举例,闭包的各种实践场景:高级技巧与实用指南
闭包是JavaScript中不可或缺的部分,它不仅可以增强代码的可维护性,还能在模块化、回调处理等场景中发挥巨大作用。然而,闭包的强大也意味着需要谨慎使用,避免潜在的性能问题和内存泄漏。通过对闭包原理的深入理解以及在实际项目中的灵活应用,你将能够更加高效地编写出简洁且功能强大的代码。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
8月前
|
缓存 NoSQL JavaScript
Vue.js应用结合Redis数据库:实践与优化
将Vue.js应用与Redis结合,可以实现高效的数据管理和快速响应的用户体验。通过合理的实践步骤和优化策略,可以充分发挥两者的优势,提高应用的性能和可靠性。希望本文能为您在实际开发中提供有价值的参考。
182 11
|
10月前
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
555 0
Next.js 实战 (四):i18n 国际化的最优方案实践