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

水深无声 2022-05-25 04:36 186阅读 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 条评论，186人围观）

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

相关阅读

相关 JavaScript实现登录滑块验证

本文实例为大家分享了JavaScript实现登录滑块验证的具体代码，供大家参考，具体内容如下 html代码 1 2 3 4 5 6 7 8

我会带着你远行/ 2022年10月15日 00:43/ 0 赞/ 302 阅读

相关 javascript进阶之变量篇

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

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

相关 JavaScript进阶篇-编程挑战

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

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

相关 Spring实现微服务—进阶篇

要想学好Spring微服务，必须要先搞明白Spring cloud有哪些组件各有什么作用。这里用一个简单的例子来串一串。 Spring framework架构的项目就像上海中

雨点打透心脏的1/2处/ 2022年06月09日 06:21/ 0 赞/ 165 阅读

相关 jsp用户登录验证

项目结构 ![20180410171232460][] login.jsp <%@ page language="java" import="java.ut

青旅半醒/ 2022年05月27日 03:16/ 0 赞/ 256 阅读

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

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

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

相关【叔小生】JavaScript进阶篇

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

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

相关 jQuery--验证用户登录

前言内容显示效果 HTML代码： CSS代码： Ja

深藏阁楼爱情的钟/ 2021年09月27日 04:46/ 0 赞/ 497 阅读

相关 JavaScript进阶

JavaScript进阶一、事件 1. 鼠标单击事件( onclick ） 2. 鼠标经过事件（onmouseover）

ゝ一纸荒年。/ 2021年09月23日 09:14/ 0 赞/ 408 阅读

相关 JavaScript进阶知识(BOM)-快速入门篇

BOM > BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏

矫情吗；*/ 2021年09月08日 08:56/ 0 赞/ 430 阅读