首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript使用表单元素验证表单的示例代码

Posted in Javascript onAugust 20, 2019

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使用表单元素验证表单的示例代码

- Author -

小明1996

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
javascript中最常用的继承模式 组合继承
Aug 12 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
javascript解析json实例详解
Nov 05 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 #Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 #Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 #Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 #Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 #Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 #Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 #Javascript
springCloud(6) Flask(2) reduce()(1) 进度条(1) Python(3) 鲲鹏(1) 信号同步(1) 裁剪图片(1) 生命周期(1) 死锁(3)
You might like
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
js window.event对象详尽解析
2009/02/17 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
javascript 闭包详解
2015/07/02 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
JavaScript运动框架 多物体任意值运动（三）
2017/05/17 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
[03:08]迎霜节狂欢！2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
python实现通过shelve修改对象实例
2014/09/26 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
浅谈Python_Openpyxl使用（最全总结）
2019/09/05 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
python3跳出一个循环的实例操作
2020/08/18 Python
详解python变量与数据类型
2020/08/25 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
浅析python实现动态规划背包问题
2020/12/31 Python
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
商场拾金不昧表扬信
2014/01/13 职场文书
自我介绍演讲稿
2014/01/15 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
单位接收函格式
2015/01/30 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
《静夜思》教学反思
2016/02/17 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript