首页
所有分类
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 相关文章推荐
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 Javascript
js将json格式内容转换成对象的方法
Nov 01 Javascript
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 Javascript
js刷新页面location.reload()用法详解
Dec 09 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
OpenFeign(1) Hive(5) Windows Server(4) HttpClient(1) RestTemplate(1) K8s(1) calc(1) SandBox(1) NTP(1) Windows Server 2022(3)
You might like
用PHP开发GUI
2006/10/09 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
Javascript生成全局唯一标识符（GUID,UUID）的方法
2016/02/27 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
理解Python垃圾回收机制
2016/02/12 Python
Python实现八大排序算法
2016/08/13 Python
python实现二叉查找树实例代码
2018/02/08 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
Python实现登陆文件验证方法
2018/10/06 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
python能做什么 python的含义
2019/10/12 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
如何利用python进行时间序列分析
2020/08/04 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
中国跨境电子商务网站：NewFrog
2018/03/10 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
应聘美工求职信
2013/11/07 职场文书
见习期自我鉴定
2014/01/31 职场文书
班组长安全工作职责
2014/07/15 职场文书
争做文明公民倡议书
2014/08/29 职场文书
迟到检讨书范文
2015/01/27 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
先进个人事迹材料（2016推荐版）
2016/03/01 职场文书
yyds什么意思？90后已经听不懂00后讲话了……
2022/02/03 杂记
HDFS免重启挂载新磁盘
2022/04/06 Servers