首页文章资源工具教程 栏目

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具，网友无需注册和下载安装即可使用

点击查看

Js使用表单元素验证表单

更新日期: 2019-07-19阅读: 2.4k标签: 表单

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>

链接: https://fly63.com/article/detial/4816

上一页:  js触发css动画，可以重复触发下一页:  10个最常见的JavaScript错误

Html5中input新增的表单元素和属性介绍。

input标签主要用于Web表单的创建交互，以便接受来自用户的数据。 我们通过更改type属性的值，来实现不同的输入类型。这篇文章主要讲解html5中新增的表单属性。

Validate表单验证插件之异步操作

使用ajax方式进行验证某个元素的值(只是验证元素的值，而不是ajax方式提交表单)，默认会提交当前验证的值到请求的地址，如果要提交其它的值，可以使用data选项。

vue2表单验证组件_vee-validate的使用教程

vee-validate基于vue2的表单验证组件，这篇文章主要讲解它的安装，引用，基础使用，内置的校验规则，自定义校验规则。Validator是以$validator被组件自动注入到Vue实例的，同时也可以独立的进行调用

关于input的一些问题解决方法分享

input是我们接受来自用户的数据常用标签，在前端开发中：移动端底部input被弹出的键盘遮挡。控制input显/隐密码。在input中输入emoji表情导致请求失败。input多行输入显示换行。输入框首尾清除空格-trim()、在input中监听键盘事件

input输入限制只能为数字

input输入限制只能为数字的2种方法，通过onkeypress事件和onkeyup事件，输不上任何非数字字符。加上正则匹配不能输入非数字字符就可以了

input,textarea限制字数,实时绑定

input,textarea限制字数,实时绑定的方式：1.在input 或 textarea中加属性 、 2.js判断，拓展： 实时绑定功能：二种输入标签的实时绑定方式 。 需求：框后面有显示字数

在HTML中限制input 输入框只能输入纯数字

使用 onkeyup 事件，有 bug ，那就是在中文输入法状态下，输入汉字之后直接回车，会直接输入字母，使用 onchange 事件，在输入内容后，只有 input 丧失焦点时才会得到结果，并不能在输入时就做出响应，使用 oninput 事件，完美的解决了以上两种问题

谷歌浏览器禁止表单自动填充

在项目开发期间发现谷歌浏览器有记住密码的功能，该功能有个问题就是一遇到input type=password就开始自动填充，同一个账户还好，就是bug了。找了一堆解决方案终于找到了办法，下面分享一下解决方案。

HTML常用标签之<form>标签

在HTML中，<form></form>标记对用来创建一个表单，即定义表单的开始和结束位置，在标记对之间的一切都属于表单的内容。每个表单元素开始于form元素，可以包含所有的表单控件

javascript实现form表单onsubmit提交前验证

可以使用form表单的onsubmit方法，在提交表单之前，对表单或者网页中的数据进行检验。onsubmit指定的方法返回true，则提交数据；返回false不提交数据。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!