首页
所有分类
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 相关文章推荐
JQuery中each()的使用方法说明
Aug 19 Javascript
xml文档转换工具，附图表例子(hta)
Nov 17 Javascript
jQuery总体架构的理解分析
Mar 07 Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
extjs简介_动力节点Java学院整理
Jul 17 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 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
Django(9) TextInputLayout(1) 短信验证码(1) reduce(2) Tsmoothie(1) EditText(1) dockerfile(1) filter(1) Selenium(1) SQLite3(1)
You might like
PHP 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
PHP 安全检测代码片段(分享)
2013/07/05 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
vue弹窗消息组件的使用方法
2020/09/24 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
python3.5安装python3-tk详解
2019/04/26 Python
pybind11在Windows下的使用教程
2019/07/04 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
顶级宝石首饰网络零售商：Angara
2016/10/25 全球购物
国际书籍零售商：Wordery
2017/11/01 全球购物
印度化妆品购物网站：Nykaa
2018/07/22 全球购物
海蓝之谜英国官网：La Mer英国
2020/01/15 全球购物
车间班组长的职责
2013/12/13 职场文书
入党介绍人评语
2014/05/06 职场文书
大学生毕业求职信
2014/06/12 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
学生评语集锦
2015/01/04 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android