JavaScript使用表单元素验证表单

头像
小明1996
    阅读 10 分钟

                       第一章:使用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表单验证
    小明1996
    4 声望0 粉丝
    « 上一篇
    JavaScript中的数组
    下一篇 »
    JavaScript中的强制类型转换

    引用和评论

    推荐阅读
    头像
    方法的概述格式及调用

    小明1996阅读 1.5k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.2k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.6k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 16阅读 2.2k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.6k

    头像
    开发插件集合

    寒青赞 12阅读 3k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.2k评论 2

    0 条评论
    得票最新