基于jQuery的快速简洁客户端表单验证

你的名字 2023-07-25 06:12 5阅读 0赞

## jQuery提供的serializeArray()方法 ##

*  首先我们来了解下方法的返回值（代码呈上）

<!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="./jquery.min.js"></script>
        <script>
            $(function() { 
                $("#myForm").on('submit', function() { 
                    var myInfor = $(this).serializeArray();
                    // 控制台打印（表单内的name值以及name的属性）
                    console.log(myInfor);
                    // 阻止跳转防止带走数组对象
                    return false;
                });
            })
        </script>
        <title>Document</title>
    </head>
    
    <body>
        <form action="" method="POST" id="myForm" style="float: right;">
            <input type="text" name="name"><br>
            <input type="password" name="password"><br>
            <input type="submit" value="提交">
        </form>
    </body>
    
    </html>

返回值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center]

*  我们想要得到两个value值（陈稳：123456）  
    (1)此处把serializeArray()方法进行改造（可写成一个单独函数或其他）

<!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="./jquery.min.js"></script>
        <script>
            // 定义一个函数，其他地方随时调用
            function serializeMyinfor(form) { 
                //定义一个空对象接收想要的值
                var result = { };
                var infor = form.serializeArray();
                //遍历数组对象，拿出需要的值（name：value）
                infor.forEach(function(item) { 
                    result[item.name] = item.value;
                });
                return result;
            }
    
            $(function() { 
                $("#myForm").on('submit', function() { 
                    var myInfor = serializeMyinfor($(this));
                    // 控制台打印（表单内的name值以及name的属性）
                    console.log(myInfor);
                    // 阻止跳转防止带走数组对象
                    return false;
                });
            })
        </script>
        <title>Document</title>
    </head>
    
    <body>
        <form action="" method="POST" id="myForm" style="float: right;">
            <input type="text" name="name"><br>
            <input type="password" name="password"><br>
            <input type="submit" value="提交">
        </form>
    </body>
    
    </html>

返回值  
![在这里插入图片描述][20200413094513121.PNG_pic_center]

*  接着对返回对象进行（客户端）快速验证（也可与数据库数据比对，安全系数较低）

<!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="./jquery.min.js"></script>
        <script>
            // 定义一个函数，其他地方随时调用
            function serializeMyinfor(form) { 
                //定义一个空对象接收想要的值
                var result = { };
                var infor = form.serializeArray();
                //遍历数组对象，拿出需要的值（name：value）
                infor.forEach(function(item) { 
                    result[item.name] = item.value;
                });
                return result;
            }
    
            $(function() { 
                $("#myForm").on('submit', function() { 
                    var myInfor = serializeMyinfor($(this));
                    // 控制台打印（表单内的name值以及name的属性）
                    // console.log(myInfor);
                    if (myInfor.name.trim().length == 0) { 
                        alert('请输入账号');
                        return false;
                    }
                    if (myInfor.password.trim().length == 0) { 
                        alert('请输入密码');
                        return false;
                    }
                    // 阻止跳转防止带走数组对象
                    // else直接传递
                    // return false;
                });
            })
        </script>
        <title>Document</title>
    </head>
    
    <body>
        <form action="" method="POST" id="myForm" style="float: right;">
            账号：<input type="text" name="name"><br> 密码：
            <input type="password" name="password"><br>
            <input type="submit" value="提交">
        </form>
    </body>
    
    </html>

实现结果  
![在这里插入图片描述][20200413095505776.PNG_pic_center]  
![在这里插入图片描述][20200413095520527.PNG_pic_center]  
好丑的界面呀，这货是搞前端的么（哈哈哈哈~）  
小陈小陈，满眼星辰  
OVER

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/5ce62b2049a34c36b7e657f49233c55d.png
[20200413094513121.PNG_pic_center]: /images/20230528/c83a1cc73663468e82ddc78c4235bcff.png
[20200413095505776.PNG_pic_center]: /images/20230528/a31eeb51920b4e7b9f31f9c8534c45f3.png
[20200413095520527.PNG_pic_center]: /images/20230528/e6292d72c9504588b2ad79c060b020a6.png