JavaScript实现用户登录验证进阶篇

水深无声 2022-05-25 04:36 218阅读 0赞

最近刷到有关实现简单的用户登录验证的前端题，由于平时基础实践较少，大多使用框架，特总结此博客：

# 一、先来看一段简单的用户登录验证： #

body{
        text-align: center;
    }
    #content{
        /*水平居中外盒子*/
        display: inline-block; 
        margin-top: 200px;
    }
    #login{
        /*登录模块水平垂直居中*/
        text-align: center;
        display: table-cell;
        vertical-align: middle;
        width:500px;
        height:400px;
        background: grey;
    }
    #text{
        line-height: 50px;
    }

<div id="content">
    	<div id="login">
    		<div id="text"><label>用户名：</label><input type="text" name="username" placeholder="请输入用户名" id="username"></div>
    		<div id="text"><label>密    码：</label><input type="password" name="password" placeholder="请输入密码" id="password"></div>
    		<button type="submit" οnclick="check()">登录</button>
    	</div>
        </div>

<script type="text/javascript">
    	function check() {
                if(document.getElementById("username").value=="") {
    		    alert("没有输入用户名！");
    		    return false;
    	     } else if(document.getElementById("password").value=="") {
    		    alert("没有输入密码！");
    		    return false;
    	     } else {
    		    alert("提交成功！")
    		    return true;
                 }
            }
    </script>

# 二、再来看稍微复杂一点的使用正则表达式进行登录验证： #

.ok {
        color: green;
        border: 1px solid green;
    }
    .error {
        color: red;
        border: 1px solid red;
    }

<div id="content">
        <div id="login">
    	<p>
    	    账号：
    	    <input type="text" id="code" οnblur="check_code()"/>
    	     <span id="code_msg">6-10位字母、数字、下划线</span>
    	</p>
    	<p>
    	    密码：
    	    <input type="text" id="pwd" οnblur="check_pwd()" />
    	    <span id="pwd_msg">8-20位字母、数字、下划线</span>
    	</p>
    	<p><input type="submit" value="登录"/></p>
        </div> 
    </div>

<script type="text/javascript">
        //校验账号的格式
        function check_code() {
    	//获取账号
            var code = document.getElementById("code").value;
    	//校验其格式(\w字母或数字或下划线)
            var span = document.getElementById("code_msg");
            var reg = /^\w{6,10}$/;
            if(reg.test(code)) {
    	    //通过，增加ok样式
    	    span.className = "ok";
    	 } else {
    	    //不通过，增加error样式
    	    span.className = "error";
    	}
        }
        function check_pwd(){
    	var code2 =document.getElementById("pwd").value;
            var span2 = document.getElementById("pwd_msg");
    	var reg2 = /^\w{6,10}$/;
    	if(reg2.test(code2)) {
    	    span2.className = "ok";
    	} else {
    	    span2.className = "error";
    	}
        }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，218人围观）

还没有评论，来说两句吧...

相关阅读

相关【PHP进阶教程】手把手教你实现用户登录验证（附实战代码）

有很多编程语言和框架可以用来构建登录系统，并提供类似于PHP的功能。一些流行的Web开发框架，如Ruby on Rails、Django（Python）和ASP.NET（...

冷不防/ 2024年04月29日 11:32/ 0 赞/ 85 阅读

相关【JavaEE进阶】实现验证码

文章目录 * ?实现说明 * ?Kaptcha插件介绍 * * ?插件原理 * ?引入依赖 * ?⽣成验证码 ...

忘是亡心i/ 2024年04月17日 10:47/ 0 赞/ 89 阅读

相关【Java 进阶篇】JavaScript 表单验证详解

![在这里插入图片描述][ee6246a97e76456ea2a96231b3fde401.png] JavaScript 表单验证是网页开发中不可或缺的一部分。它允许您确保

叁歲伎倆/ 2024年03月27日 18:32/ 0 赞/ 130 阅读

相关【Java 进阶篇】JavaScript变量详解

![在这里插入图片描述][ee6246a97e76456ea2a96231b3fde401.png] JavaScript是一门广泛应用于网页开发的脚本语言，而变量则是Jav

た入场券/ 2024年02月22日 09:06/ 0 赞/ 71 阅读

相关【Java 进阶篇】Java Web开发：实现验证码功能

![在这里插入图片描述][ee6246a97e76456ea2a96231b3fde401.png] 在Web应用程序中，验证码（CAPTCHA）是一种常见的安全工具，用于验

我就是我/ 2024年02月20日 11:56/ 0 赞/ 75 阅读

相关 JavaScript实现登录滑动验证

来自于GitHub， [如何快速访问GitHub][GitHub] 先附上效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naG

客官°小女子只卖身不卖艺/ 2023年07月20日 05:52/ 0 赞/ 30 阅读

相关 javascript进阶之变量篇

仔细的看了看<javascript权威指南>，算笔记吧 1、关于变量的声名大家都知道javascript是可以隐式声名变量的。但要注意，隐式声名变量总是被创建为全局变

电玩女神/ 2022年09月18日 03:58/ 0 赞/ 228 阅读

相关 JavaScript进阶篇-编程挑战

编程挑战现在利用之前我们学过的JavaScript知识，实现选项卡切换的效果。效果图: ![53bd0e9e000163d203390200.jpg][] 文字

超、凢脫俗/ 2022年06月11日 08:28/ 0 赞/ 254 阅读

相关 JavaScript实现用户登录验证进阶篇

最近刷到有关实现简单的用户登录验证的前端题，由于平时基础实践较少，大多使用框架，特总结此博客：一、先来看一段简单的用户登录验证： body{

水深无声/ 2022年05月25日 04:36/ 0 赞/ 219 阅读

相关【叔小生】JavaScript进阶篇

如何插入JS JS基础语法语法、函数、方法提取字符串substring() substring() 方法用于提取字符串中介于两个指定下标之间的字符。

迈不过友情╰/ 2021年09月30日 09:16/ 0 赞/ 368 阅读