Javascript 案例:验证登录用户名

最新推荐文章于 2024-07-13 17:56:15 发布

Joker-Tong

最新推荐文章于 2024-07-13 17:56:15 发布

阅读量3.9k

点赞数 5

分类专栏： # web开发学习文章标签： js javascript

本文链接：https://blog.csdn.net/Weary_PJ/article/details/107545537

版权

web开发学习专栏收录该内容

31 篇文章 1 订阅

订阅专栏

Javascript 案例:验证登录用户名

为了详细的介绍一下JS中的DOM模型,于是决定举个例子来说明一下,方便理解
下图是JS中DOM模型,我们可以把它当成一个类 ,并通过.来获取类中的属性
在这里插入图片描述
在登录界面,我们通常碰到过这样的问题,比如用户名不合法,没有首字母开头等等
下面我就简单的实现一下

需求

我们的需求如下

当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。
验证的规则是：必须由字母，数字。下划线组成。并且长度是5到12位。

这是一个非常简单的登录界面,为了演示方便,就不加什么css特效了
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS登录验证简单实现</title>
</head>
<body>
<form action="" method="get" align="center">
    用户名：<input type="text" id="username" value="" placeholder="请输入你的用户名"/>
    <br>
    密&nbsp;&nbsp;&nbsp;&nbsp;码: <input type="password" placeholder="请输入你的密码">
    <span id="usernameSpan" style="color:red;"></span>
    <br>
    <button onclick="onclickFun()">登录</button>
</form>

</body>
</html>

实现

我们的目标是实现对用户名的验证,比如用户名不符合要求时,要显示出下面的效果
在这里插入图片描述
这里要用到正则表达式的方法

var patt = new RegExp("e");
var patt = /[abc]/;

上面两种方法都可以创建正则表达式对象
正则表达的调用也很简单
patt.test(str) 即可返回 true与false

下面就开始吧

1. 正则表达式

为了判断用户名的格式,我们需要编写正则表达式,这里的要求比较简单
所以使用下面的代码就可以了

var patt = new RegExp("^\\w{5,12}$");

var patt = /^\w{5,12}$/;

注意上面两种写法都可以 ,在第一种写法的时候斜杠因为需要转义所以要两个斜杠

2.点击函数

我们的目标是在点击按钮的同时进行验证
所以给出点击函数如下

function onclickFun() {
        var patt = new RegExp("^\\w{5,12}$");
        // var patt = /^\w{5,12}$/;
        var username = document.getElementById('username');
        var test_username = username.value;
        var usernameSpan = document.getElementById('usernameSpan');
        if (patt.test(test_username)) {
            usernameSpan.innerHTML = '用户名合法';
        } else {
            usernameSpan.innerHTML = '用户名不合法';
        }
    }

上面的流程分以下几步

获取用户名输入框对象
获取出错提醒的span对象
通过.value获取值
通过一个简单的判断来改变span对象的innerHTML

全代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS登录验证简单实现</title>
</head>
<body>
<script>
    // 当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法
    // 验证的规则是：必须由字母，数字。下划线组成。并且长度是5到12位
    function onclickFun() {
        var patt = new RegExp("^\\w{5,12}$");
        // var patt = /^\w{5,12}$/;
        var username = document.getElementById('username');
        var test_username = username.value;
        var usernameSpan = document.getElementById('usernameSpan');
        if (patt.test(test_username)) {
            usernameSpan.innerHTML = '用户名合法';
        } else {
            usernameSpan.innerHTML = '用户名不合法';
        }
    }

</script>

用户名：<input type="text" id="username" placeholder="请输入你的用户名"/>
<span id="usernameSpan" style="color:red;"></span>
<br>
密&nbsp;&nbsp;&nbsp;&nbsp;码: <input type="password" placeholder="请输入你的密码">
<br>
<button onclick="onclickFun()">登录</button>


</body>
</html>

Joker-Tong

关注

5
点赞
踩
28

收藏

觉得还不错? 一键收藏
打赏
0
评论
Javascript 案例:验证登录用户名

Javascript 案例:验证登录用户名为了详细的介绍一下JS中的DOM模型,于是决定举个例子来说明一下,方便理解下图是JS中DOM模型,我们可以把它当成一个类 ,并通过.来获取类中的属性在登录界面,我们通常碰到过这样的问题,比如用户名不合法,没有首字母开头等等下面我就简单的实现一下需求我们的需求如下当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。验证的规则是：必须由字母，数字。下划线组成。并且长度是5到12位。这是一个非常简单的登录界面,为了演示方便,就不加什么c
复制链接

扫一扫