javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 前端正则注册登录表单的验证

前端利用正则表达式来注册或登录表单的验证示例代码

作者：虚拟现实旅人

这篇文章主要给大家介绍了关于前端利用正则表达式来注册或登录表单的验证,文中通过代码介绍了用户名、密码、手机号、邮箱的格式校验及错误提示,通过JavaScript在提交时逐项检查,确保数据有效性,需要的朋友可以参考下

简介

在网页的注册或者登录页面中，进行表单验证是我们能否进入该网页的关键步骤。今天通过一个简单的示例，利用正则表达式来进行表单验证以及在用户提交时进行相应的错误提示。

1.HTML部分

在HTML部分中，将构建一个基本的注册表单，包含用户名、密码、确认密码、手机号和邮箱输入框。HTML表单使用了<form>标签，并将数据提交到服务器（这里只是一个示例URL，实际开发中应根据需求填写）。

<form action="http://httpbin.org/post" method="post">
    <div class="row">
        登录账号：<input type="text" name="username" placeholder="请输入3-16位之间的账号">
        <div class="username-tips"></div>
    </div>
    <div class="row">
        登录密码：<input type="password" name="password" placeholder="请输入6-16位之间的密码">
        <div class="password-tips"></div>
    </div>
    <div class="row">
        确认密码：<input type="password" name="password2" placeholder="请再次输入登录密码">
        <div class="password2-tips"></div>
    </div>
    <div class="row">
        手机号码：<input type="text" name="mobile" placeholder="请输入手机号码">
        <div class="mobile-tips"></div>
    </div>
    <div class="row">
        注册邮箱：<input type="email" name="email" placeholder="请输入邮箱地址">
        <div class="email-tips"></div>
    </div>
    <input type="submit" value="注册">
</form>

1.username (账号)：用于输入用户名，要求长度在3到16个字符之间。
2.password (密码)：用于输入密码，要求长度在6到16个字符之间。
3.password2 (确认密码)：再次输入密码以确认一致。
4.mobile (手机号码)：要求输入有效的手机号码，符合中国大陆的手机号码格式。
5.email (邮箱)：要求输入有效的邮箱地址。
6.在每个输入框下方都有一个<div>元素，用于显示与该输入框相关的错误提示信息。类名如.username-tips、.password-tips等，用来标识对应的错误提示内容。

2.CSS部分

.row {
    height: 42px;
    border-bottom: 1px solid #aaa;
    margin-bottom: 10px;
}

.username-tips, .password-tips, .password2-tips, .mobile-tips, .email-tips {
    color: red;
    font-size: 12px;
}

.row：为每个表单行设置了固定的高度，并给每行添加一个下边框。
.username-tips等：设置了错误提示的文本颜色为红色，并设置字体大小为12px，确保提示信息清晰可见。

3.JavaScript部分

这部分是代码的核心，用JavaScript来对用户输入的数据进行验证。在提交表单前，我们会检查每个字段是否符合要求。如果某一项不符合要求，表单提交会被阻止，同时显示对应的错误提示。

验证逻辑：

1.验证用户名：长度要求在3到16个字符之间。

2.验证密码：长度要求在6到16个字符之间。

3.验证确认密码：确保密码和确认密码一致。

4.验证手机号：使用正则表达式检查手机号格式是否正确。

5.验证邮箱地址：使用正则表达式检查邮箱格式是否有效。

var username = document.querySelector('input[name="username"]');
var password = document.querySelector('input[name="password"]');
var password2 = document.querySelector('input[name="password2"]');
var mobile = document.querySelector('input[name="mobile"]');
var email = document.querySelector('input[name="email"]');
var submit = document.querySelector('input[type="submit"]');

username.onfocus = function() {
    document.querySelector('.username-tips').innerHTML = "";
};

submit.onclick = function() {
    let uv = username.value;
    let pv = password.value;
    let pv2 = password2.value;
    let mv = mobile.value;
    let ev = email.value;

    // 校验账号
    if (uv.length < 3 || uv.length > 16) {
        document.querySelector('.username-tips').innerHTML = "请输入3-16位之间的账号!";
        return false;
    }

    // 校验密码
    if (pv.length < 6 || pv.length > 16) {
        document.querySelector('.password-tips').innerHTML = "请输入6-16位之间的密码!";
        return false;
    }

    // 校验确认密码
    if (pv !== pv2) {
        document.querySelector('.password2-tips').innerHTML = "登录密码与确认密码必须一致！";
        return false;
    }

    // 验证手机号
    if (!/^1[3-9]\d{9}$/.test(mv)) {
        document.querySelector('.mobile-tips').innerHTML = "手机号码格式有误！";
        return false;
    }

    // 验证邮箱格式
    if (!/^\w+@\w+\.\w+$/.test(ev)) {
        document.querySelector('.email-tips').innerHTML = "注册邮箱格式有误！";
        return false;
    }
}

1.我们首先定义了表单中的各个输入框和提交按钮的引用。
2.当用户点击输入框时，我们清空相应的错误提示。
3.提交表单时，使用onclick事件处理函数对用户输入的数据进行逐项验证：
用户名、密码、确认密码、手机号和邮箱都必须符合特定的规则。如果验证失败，错误提 示将会显示在相应的<div>中。
如果所有验证都通过，表单才会提交。

运行结果

校验账号错误

校验密码错误

校验手机号码错误

校验注册邮箱错误

提交成功

完整代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .row{
        height: 42px;
        border-bottom: 1px solid #aaa;
        margin-bottom: 10px;
    }
    .username-tips, .password-tips, .password2-tips, .mobile-tips, .email-tips{
        color: red;
        font-size: 12px;
    }
    </style>
</head>
<body>
<form action="http://httpbin.org/post" method="post">
    <div class="row">
        登录账号：<input type="text" name="username" placeholder="请输入3-16位之间的账号">
        <div class="username-tips"></div>
    </div>
    <div class="row">
        登录密码：<input type="password" name="password" placeholder="请输入6-16位之间的密码">
        <div class="password-tips"></div>
    </div>
    <div class="row">
        确认密码：<input type="password" name="password2" placeholder="请再次输入登录密码">
        <div class="password2-tips"></div>
    </div>
    <div class="row">
        手机号码：<input type="text" name="mobile" placeholder="请输入手机号码">
        <div class="mobile-tips"></div>
    </div>
    <div class="row">
        注册邮箱：<input type="email" name="email" placeholder="请输入邮箱地址">
        <div class="email-tips"></div>
    </div>
    <input type="submit" value="注册">
</form>
<script>
    // 在2种情况下，进行数据验证
    // 用户输入完以后验证
    var username = document.querySelector('input[name="username"]')
    var password = document.querySelector('input[name="password"]')
    var password2 = document.querySelector('input[name="password2"]')
    var mobile = document.querySelector('input[name="mobile"]')
    var email = document.querySelector('input[name="email"]')
    var submit = document.querySelector('input[type="submit"]');

    username.onfocus = function(){
        // 当输入光标进入当前输入框会触发onfocus事件，去除错误提示
        document.querySelector('.username-tips').innerHTML = "";
    }

    submit.onclick = function(){
        let uv = username.value
        let pv = password.value
        let pv2 = password2.value
        let mv = mobile.value
        let ev = email.value
        // 校验账号
        if(uv.length<3 || uv.length>16){
            document.querySelector('.username-tips').innerHTML = "请输入3-16位之间的账号!"
            return false;
        }

        // 校验密码
        if(pv.length<6 || pv.length > 16){
            document.querySelector('.password-tips').innerHTML = "请输入6-16位之间的密码!"
            return false;
        }

        // 校验确认密码
        if(pv!=pv2){
            document.querySelector('.password2-tips').innerHTML = "登录密码与确认密码必须一致！"
            return false;
        }

        // 验证手机号
        if(!/^1[3-9]\d{9}$/.test(mv)){
            document.querySelector('.mobile-tips').innerHTML = "手机号码格式有误！"
            return false;
        }

        // 验证邮箱格式
        // 1@qq.com
        // 123213@qq.com
        if(!/^\w+@\w+\.\w+$/.test(ev)){
            document.querySelector('.email-tips').innerHTML = "注册邮箱格式有误！"
            return false;
        }
        
    }
</script>
</body>
</html>

总结 

到此这篇关于前端利用正则表达式来注册或登录表单的验证的文章就介绍到这了,更多相关前端正则注册登录表单的验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文