首页
所有分类
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 相关文章推荐
JS 自定义函数缺省值的设置方法
May 05 Javascript
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
React-Native做一个文本输入框组件的实现代码
Aug 10 Javascript
探讨Vue.js的组件和模板
Oct 27 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
如何检查一个对象是否为空
Apr 11 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 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
内存泄露(1) 温控(1) Seaborn(1) tensorflow(2) 微信(2) Xception(1) Spring(9) PostMapping(1) ResNet50(1) Lifecycle(1)
You might like
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
详解关于php的xdebug配置(编辑器vscode)
2019/01/29 PHP
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
JS版的date函数（和PHP的date函数一样）
2014/05/12 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
微信小程序 密码输入（源码下载）
2017/06/27 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
python中的函数用法入门教程
2014/09/02 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
python批量赋值操作实例
2018/10/22 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
对python生成业务报表的实例详解
2019/02/03 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
canvas简易绘图的实现（海绵宝宝篇）
2018/07/04 HTML / CSS
波比布朗英国官网：Bobbi Brown英国
2017/11/13 全球购物
阿根廷票务网站：StubHub阿根廷
2018/04/13 全球购物
机械绘图员岗位职责
2013/11/19 职场文书
简历中的自我评价怎么写
2014/01/29 职场文书
转让协议书
2015/01/27 职场文书
Python基础详解之邮件处理
2021/04/28 Python
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL