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

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 收藏的js表单验证控制代码大全第1/3页

    关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单: 目录: 1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长度限制  2.:js判断汉字.判断是否汉字 .只能输入汉字 3:js判断是否输入英文.只能输入英文 4:js只能输入数字,判断数字.验证数字.检测数字.判断是否为数字.只能输入数字 5:只能输入英文字符和数字 6: js email验证 .js 判断email .信箱/邮箱格式验证 7:js字符过滤,屏蔽关键字 8:js

  • JavaScript 表单验证正则表达式大全[推荐]

    具体和函数结合的使用方法,还请查看下篇文章 JavaScript 使用正则表达式进行表单验证的示例代码 复制代码 代码如下: 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[^x00-xff] 评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) 匹配空白行的正则表达式:ns*r 评注:可以用来删除空白行 匹配HTML标记的正则表达式:< (S*?)[^>]*>.*?

  • 利用JS提交表单的几种方法和验证(必看篇)

    工作中发现表单提交方便的问题,很多时候IE下提交好好的,打了火狐下就出现了问题,利用提交按钮就不成功了,于是利用JS的方式就成功了,也不知道为什么.在导师的催促下就总结出以下的几种常用表单提交的方法. 第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 <script type="text/javascript"> function validate(obj) { if (confirm("提交表单?")) { aler

  • AngularJS实现表单验证

    虽然我不是前端程序员,但明白前端做好验证是多么重要. 因为这样后端就可以多喘口气了,而且相比后端什么的果然还是前端可以提高用户的幸福感. AngularJS提供了很方便的表单验证功能,在此记录一番. 首先从下面这段代码开始 复制代码 代码如下: <form ng-app="myApp" ng-controller="validationController" name="mainForm" novalidate>     <p&

  • javascript表单验证 - Parsley.js使用和配置

    在线演示 大家还记得我们曾经介绍过的表单验证jquery插件jquery.validationEngine吧,使用这个插件你不需要写任何一行js代码就可以生成一个功能强大的表单验证功能.是不是超棒? 今天介绍的Parsley同样也可以帮助你只使用简单的配置即可实现表单验证功能,基于它的强大DOM-API. 主要特性 •基于超棒的用户体验 •超级方便配置 •超轻量级(压缩后12K),支持jQuery和Zepto •超简单,只需要简单配置DOM-API,类似jQuery的data API •绝对免费

  • js 常用正则表达式表单验证代码

    正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下:测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证.替换文本.可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字.根据模式匹配从字符串中提取一个子字符串.可以用来在文本或输入字段中查找特定文字. 基本语法 在对正则表达式的功能和作用有了初步的了解之后,我们就来具体看一下正则表

  • AngularJS实现表单手动验证和表单自动验证

    AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证. 一.手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件: 1.给form元素加上novalidate="novalidate": 2.给form元素加上name="theForm",如下: <!DOCTYPE html> <html lang="en" ng-app="myApp1&quo

  • js验证表单大全

    不错的JS验证~~~~~~~~~~~~~~~~~~~~~~~~~ 用途:校验ip地址的格式 输入:strIP:ip地址 返回:如果通过验证返回true,否则返回false: */ function isIP(strIP) { if (isNull(strIP)) return false; var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正则表达式 if(re.test(strIP)) { if( RegExp.$1 <256 && R

  • JavaScript 使用正则表达式进行表单验证的示例代码

    JavaScript 表单验证正则表达式大全利用正则表达式判断是否是0-9的阿拉伯数字 复制代码 代码如下: function regIsDigit(fData) { var reg = new RegExp("^[0-9]$"); return (reg.test(fData)); } 利用这则表达式获取字符串的长度 复制代码 代码如下: function regDataLength(fData) { var valLength = fData.length; var reg = n

  • JavaScript表单验证完美代码

    JavaScript表单验证完美代码

    用原生JS写一个简单的表单验证 首先,是html部分 <div class="divAll"> <div id="titles">新用户注册</div> <div id="contents"> <h3>基本信息</h3> <hr width="95%" color="#f2f2f2"/> <form action=&q

  • javascript制作的简单注册模块表单验证

    javascript制作的简单注册模块表单验证

    一个注册框  进行表单验证处理 如图 有简单的验证提示功能 代码思路也比较简单 输入框失去焦点时便检测,并进行处理 表单具有 onsubmit = "return check()"行为,处理验证情况 点击提交表单按钮时,进行最终的验证,达到是否通过表单提交的请求. 先是最基本的html+css部分 <style type="text/css"> body{margin:0;padding: 0;} .login{position:relative;mar

  • AngularJS使用ngMessages进行表单验证

    AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 名称为"ngMessages"的module,通过npm install angular-messages进行安装.在没有使用ngMessages之前,我们可能这样写验证: <form name="

  • JavaScript表单验证实例之验证表单项是否为空

    表单验证几乎在每一个需要注册或者登陆的网站是必不可少的,有些验证则非常的复杂,可以说是各种各样给你的要求,不过本章节只介绍一下表单中最简单的验证方式,就是判断是否为空,有些要求比较低的网站对此已经满足需要了. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ww

随机推荐