用JS的‘ if...else ’做【网站登录的用户表单验证】

最新推荐文章于 2022-08-15 19:49:49 发布

梦境工程师-335

最新推荐文章于 2022-08-15 19:49:49 发布

阅读量2.2k

点赞数 4

分类专栏：前端作品大集合前端_Javascript 文章标签： html5 css3 javascript 前端 html

本文链接：https://blog.csdn.net/qq_41136216/article/details/105788340

版权

本文介绍了如何使用JavaScript进行前端用户登录表单验证，旨在减少服务器负载。内容包括提出问题、解决思路，以及HTML、CSS和JS的实现代码。通过JS严格模式判断输入值的非空和长度限制，确保表单数据的严谨性。

摘要由CSDN通过智能技术生成

文章目录

为了减少服务器负载，将表单计算验证环节在客户浏览器上执行，验证完成基本的格式后，再提交给服务器进行数据处理，那么，前端如何用JS做网站登录的用户表单验证？
在这里插入图片描述

一，提出问题

制作一个表单，前三个文本框不为空，且长度不能少于 6 位，其余单选按钮，复选按钮和下拉菜单都为必选项，不能为空

二，解决思路

（1）按照正常的逻辑，先写一些html标签

在这里插入图片描述

（2）然后用点CSS优化下表单，让其变得好看一点

在这里插入图片描述

（3）写JS代码的逻辑

为了数据的严谨性，我们采用严格模式进行判断，这里我们抽取一段代码来进行判断，之后依次类推，按个复制修改下判断逻辑让判断结果为真或假后继续嵌套下去

通过Name值对表单输入框进行获取

        //采用严格模式进行判断
        "user strict"
        //通过name对input框的对象
        var username = document.getElementsByName("username"); //用户名

然后将获取的值进行逻辑比较，主要排除Value为空，长度大于 6

   //用户名格式判断
if (username[0].value != "" && username[0].value != null && username[0].value.length >= 6) {

三，index.html 文件代码（复制粘贴即可运行）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>
    <style>
        form {
    
            position: relative;
            width: 600px;
            padding: 20px;
            font-weight: 600;
            border-radius: 14px;
            box-shadow: 2px 2px 12px #3c3c3c;
            background: darkgray;
            margin: 5% auto;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.8s ease;
        }

        form:hover {
    
            background: rgb(219, 219, 219);
        }

        form input,
        select {
    
            border: none;
            border: 1px solid salmon;
            border-radius: 2px;
        }

        button {
    
            color: rgb(224, 44, 24);
            width: 80px;
            padding: 2px 10px;
            border: none;
            border: 2px solid salmon;
            border-radius: 4px;
        }

        #displayBan {
    
            position: absolute;
            top: 100%;
            right: 0;
            width: 30%;
            height: 100%;
            border-left: 20px solid seashell;
            background-color: rgb(245, 130, 117);
            transition: all 0.2s ease-in;
        }

        #displayBan span {
    
            display: block;
            width: fit-content;
            margin-top