JavaScript使用表单元素验证表单

57次阅读

共计 6136 个字符，预计需要花费 16 分钟才能阅读完成。

                   第一章: 使用 JavaScript 验证表单

JavaScript 的主要作用: 验证表单

1 最简单的表单验证 - 禁止空白的必填项目

1.1 最简单的 HTML 结构

网站最基础的就是注册, 它是一个系统的交互基础.

例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 简单列表的 html 结构 </title>
    </head>
    <body>
        <form method="post" action="">
            账户:<input type="text" name=""/><br/><br/>
            密码:<input type="password" name=""/><br/><br/>
            确认:<input type="password" name=""/><br/><br/>
            <input type="submit"  value="注册" />
        </form>
    </body>
</html>

1.2 绑定验证功能

因为用户最后要去点击 ” 注册 ” 按钮, 所以我们就在 ” 注册 ” 按钮上添加一个 onclick 事件属性, 引用 eg.regCheck()

例子:

​ 注册事件 

<!DOCTYPE html>
<html>
    <!-- 绑定验证功能，注册事件 -->
    <head>
        <meta charset="utf-8">
        <title> 简单列表的 html 结构 </title>
    </head>
    <body>
        <form method="post" action="">
            账户:<input type="text" name=""/><br/><br/>
            密码:<input type="password" name=""/><br/><br/>
            确认:<input type="password" name=""/><br/><br/>
            <input type="submit"  
            value="注册"
             onclick="return eg.regCheck();"/>        
        </form>
        <script >
            // 声明一个对象, 当做命名空间来使用
            var eg =  {};
            eg.regCheck = function(){}
        </script>
    </body>
</html>

eg.regCheck() 函数需要添加的行为, 获取用户输入的账户信息, 给 input 标签加上一个 id 属性,JavaScript 再通过这个指定的 id 去取得相应的信息, 然后返回验证结果 true 或 false

例子:

​ 给表单添加验证功能 

<!DOCTYPE html>
<html>
    <!-- 给表单添加验证功能 -->
    <head>
        <meta charset="utf-8">
        <title> 简单列表的 html 结构 </title>
    </head>
    <body>
        <form method="post" action="">
            账户:<input type="text" name=""id="userid"/><br/><br/>
            密码:<input type="password" name=""id="userpwd"/><br/><br/>
            确认:<input type="password" name=""id="userpwd2"/><br/><br/>
            <input type="submit"  
            value="注册"
            onclick="return eg.regCheck();"/>
        </form>
        <script >
            // 声明一个对象, 当做命名空间来使用
            // 定义一个公共函数来获取指定 id 元素, 减少代码量, 提高代码复用率
            var eg =  {};
            eg.$ = function(id){return document.getElementById(id);
                };
                eg.regCheck = function(){var uid = eg.$("userid");
                    var upwd = eg.$("userpwd");
                    var upwd2 = eg.$("userpwd2");    
                if(uid.value == ''){alert('账户不能为空!');
                    // 返回 false 就会阻止表单 form 提交
                    return false;
                }
                if(upwd.value == ''){alert('密码不能为空!');
                    // 返回 false 就会阻止表单 form 提交
                    return false;
                }
                if(upwd.value != upwd2.value){alert('两次输入密码不相同!');
                    // 返回 false 就会阻止表单 form 提交
                    return false;
                }
                return true;
            };
        </script>
    </body>
</html>

1.3 绑定验证的另一种方式

​ 把验证放在 ” 注册 ” 按钮的 onclick 事件属性里使用, 还有另一种调用方式, 即 form 标签的 onsubmit 事件属性

例子:

​ form 表单绑定验证完整范例 

<!DOCTYPE html>
<html>
<!--
绑定验证的另一种方式,form 表单绑定验证完整示例
-->
    <head>
        <meta charset="utf-8">
        <title> 简单列表的 html 结构 </title>
    </head>
    <body>
        <form method="post" action=""onsubmit="return eg.regCheck();">
            账户:<input type="text" name=""id="userid"/><br/><br/>
            密码:<input type="password" name=""id="userpwd"/><br/><br/>
            确认:<input type="password" name=""id="userpwd2"/><br/><br/>
            <input type="submit"  
            value="注册"
             />
        </form>
        <script>
            // 声明一个对象, 当做命名空间来使用
            // 定义一个公共函数来获取指定 id 元素, 减少代码量, 提高代码复用率
            var eg =  {};
            eg.$ = function(id){return document.getElementById(id);
                };
            eg.regCheck = function () {var uid = eg.$("userid");
                var upwd = eg.$("userpwd");
                var upwd2 = eg.$("userpwd2");
                if(uid.value == ''){alert('账户不能为空!');
                    // 返回 false 就会阻止表单 form 提交
                    return false;
                }
                if(upwd.value == ''){alert('密码不能为空!');
                    // 返回 false 就会阻止表单 form 提交
                    return false;
                }
                if(upwd.value != upwd2.value){alert('两次输入密码不相同!');
                    // 返回 false 就会阻止表单 form 提交
                    return false;
                }
                return true;

            };
        </script>
    </body>
</html>

2, 处理各种类型的表单元素

2.1，input,textarea,hidden 和 button

​ 要求: 在注册表单的基础上加 ” 简介 ” 字段，可以为空，但是最长不超过 60 个字符，同时要统计一下，用户输入错误的次数，输入超过 3 次，就锁定 ” 注册 ” 按钮, 然后要 ” 解锁 ” 才能重新使用

例子:

​ 处理各种类型表单一 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title> 处理各种类型表单一 </title>
    </head>
    <body>
        <form method="post" action=""onsubmit="return eg.regCheck();">
            账户:<input type="text" name=""id="userid"/><br/><br/>
            密码:<input type="password" name=""id="userpwd"/><br/><br/>
            确认:<input type="password" name=""id="userpwd2"/><br/><br/>
            简介:
                <textarea name=""rows="4"cols="18"id="about">
                </textarea><br/><br/>
            <input type="submit"
            value="注册" id="regBtn"
             />
            <input type="button" value="解锁" onclick="eg.unlock"
            style="display: none;" id="regUnlock">
        </form>
        <script>
            // 声明一个对象, 当做命名空间来使用
            // 定义一个公共函数来获取指定 id 元素, 减少代码量, 提高代码复用率
            var eg =  {};
            eg.$ = function(id){return document.getElementById(id);
                };
            // 主要的验证方法
            eg.regCheck = function () {var uid = eg.$("userid");
                var upwd = eg.$("userpwd");
                var upwd2 = eg.$("userpwd2");
                //value 是元素自带属性
                if(uid.value == ''){alert('账户不能为空!');
                    eg.err();
                    return false;
                }
                if(upwd.value == ''){alert('密码不能为空!');
                    eg.err();
                    return false;
                }
                if(upwd.value != upwd2.value){alert('两次输入密码不相同!');
                    eg.err();
                    return false;
                }
                // 新增部分
                var about = eg.$("about");
                //value 是字符串类型的属性
                if (about.value.length>60){alert("简介太长!");
                    eg.err();
                    return false;

                }
                // 返回 true 就会提交表单
                return true;

            };
            // 出错时记录错误次数
            eg.err = function () {var el = eg.$("errnum");
                var old = el.value;
                // 把字符串转换为整数 +1, 并保存起来
                el.value = parseInt(old)+1;
                // 用来检查是否应该锁定
                eg.lock();};
            // 通过次数判断是否要锁定
            eg.lock = function(){var err = eg.$("errnum");
                if (parseInt(err.value)>2){eg.$("regBtn").disabled = true;
                    // 根据业务需求, 输错 3 次就锁定
                    eg.$("regUnlock").style.display="block";
                    // 同时显示解锁按钮
                }
            };
            eg.unlock = function(){eg.$("regBtn").disabled = false;
                // 根据业务需求，解锁就是让用户可以重新注册
                eg.$("regUnlock").style.display="none";
                // 元素所有样式都挂载到 style 属性下
            }
        </script>
    </body>
</html>

现在制作一个错误统计, 可以为后台系统保存起来用于分析用户的错误率，甚至可以分析出用户一般会在哪些字段上出错。记录错误信息不需要给用户看到，可以选择 input 的 type 属性是 hidden 的元素来存储

2.2checkbox,radio 和 select

知道用户性别, 年龄, 兴趣爱好

例子:

​ 处理各种类型表单二 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title> 处理各种类型表单二 </title>
    </head>
    <body>
        <form method="post" action=""onsubmit="return eg.regCheck();">

            账户:<input type="text" name=""id="userid"/><br/><br/>
            密码:<input type="password" name=""id="userpwd"/><br/><br/>
            确认:<input type="password" name=""id="userpwd2"/><br/><br/>
            简介:
                <textarea name=""rows="4"cols="18"id="about">
                </textarea><br/><br/>
            <input type="submit"
            value="注册" id="regBtn"
             />
            <input type="button" value="解锁" onclick="eg.unlock"
            style="display: none;" id="regUnlock">
        </form>
        <script>
            // 声明一个对象, 当做命名空间来使用
            // 定义一个公共函数来获取指定 id 元素, 减少代码量, 提高代码复用率
            var eg =  {};
            eg.$ = function(id){return document.getElementById(id);
                };
            // 主要的验证方法
            eg.regCheck = function () {var uid = eg.$("userid");
                var upwd = eg.$("userpwd");
                var upwd2 = eg.$("userpwd2");
                //value 是元素自带属性
                if(uid.value == ''){alert('账户不能为空!');
                    eg.err();
                    return false;
                }
                if(upwd.value == ''){alert('密码不能为空!');
                    eg.err();
                    return false;
                }
                if(upwd.value != upwd2.value){alert('两次输入密码不相同!');
                    eg.err();
                    return false;
                }
                // 新增部分
                var about = eg.$("about");
                //value 是字符串类型的属性
                if (about.value.length>60){alert("简介太长!");
                    eg.err();
                    return false;

                }
                // 返回 true 就会提交表单
                return true;

            };
            // 出错时记录错误次数
            eg.err = function () {var el = eg.$("errnum");
                var old = el.value;
                // 把字符串转换为整数 +1, 并保存起来
                el.value = parseInt(old)+1;
                // 用来检查是否应该锁定
                eg.lock();};
            // 通过次数判断是否要锁定
            eg.lock = function(){var err = eg.$("errnum");
                if (parseInt(err.value)>2){eg.$("regBtn").disabled = true;
                    // 根据业务需求, 输错 3 次就锁定
                    eg.$("regUnlock").style.display="block";
                    // 同时显示解锁按钮
                }
            };
            eg.unlock = function(){eg.$("regBtn").disabled = false;
                // 根据业务需求，解锁就是让用户可以重新注册
                eg.$("regUnlock").style.display="none";
                // 元素所有样式都挂载到 style 属性下
            }
        </script>
    </body>
</html>

正文完
表单验证
发表至： javascript
2019-08-19
 0
前端项目修改默认滚动条样式
HTTP精简教程二：简单的HTTP协议
小程序项目之填坑小记
长期维护更新，前端面试题整理