注册3次错误，最终的结果：

代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>表单验证_02</title>

     </head>

     <body>

         <!--把验证放在注册按钮的onclick事件属性里使用，同样还有另一种调用方式，就是form标签的onsubmit事件属性，，功能一样<br />-->

         <form method="post" onsubmit="return eg.regCheck()" action="">

         <input type="hidden" id="errnum" value="0"/>

         <!--由于错误的次数无需显示出来，所以将其隐藏起来-->

         账号：<input type="text" name="" id="userid" /><br/><br/>

         密码：<input type="password" name="" id="userpassword" /><br/><br/>

       确认密码：<input type="password" name="" id="userpassword1" /><br/><br/>

         简介：<textarea name="" rows="4" cols="18" id="about"></textarea><br/><br/>

         <input type="submit"  value="注册" id="regBtn"  />

         <input type="button"  value="解锁"  id="regUnlock" style="display: none;"  onclick="eg.unlock()" />

         </form>

         <script>

             var eg={};

             //声明一个对象，当作命名空间来使用

             //定义一个公共函数来获取id元素，减少代码量，提高代码复用率

             eg.$=function(id){

                 return document.getElementById(id);

             };

             eg.regCheck=function(){

                 var uid=eg.$("userid");

                 var upwd=eg.$("userpassword");

                 var upwd1=eg.$("userpassword1");

                 var about=eg.$("about");

                 if(uid.value=='')

                 {

                     alert('账号不能为空！！！');

                         eg.err();

                     return false;//返回false就会阻止表单的提交

                 }

                 if(upwd.value==''){

                     alert('密码不能为空！！');

                         eg.err();

                     return false;//返回false就会阻止表单的提交

                 }

                 if(upwd.value!=upwd1.value)

                 {

                     alert('输入密码不一致!!!');

                         eg.err();

                     return false;//返回false就会阻止表单的提交

                 }

                 if(about.value.length>60)//valu是字符串的属性

                 {

                     alert('简介太长!!!');

                     eg.err();

                     return false;

                 }

                 return true;//返回true就会允许表单的提交

             };

             //出错时记录错误次数

             eg.err=function(){

                 var el=eg.$("errnum");

                 var old=el.value;

                 el.value=parseInt(old)+1;//把字符串转换为整数+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>

表单验证_02.html

在进行验证注册时，我们有两种方式：

  1. 把验证放在注册按钮的onclick事件属性里使用。

2.form标签的onsubmit事件属性。例如本例中

<form method="post" onsubmit="return eg.regCheck()" action="">

本示例特点：

在以前我们都是直接提示错误信息就行了，在该例中我采用的是进行错误的统计，这些统计的数据非常有用，可以为后台系统保存起来用于分析用户的错误率，甚至可以分析出用户一般会在那一些字段出错。当然记录的错误信息不给用户看到，可以使用input的type属性是hidden元素来进行隐藏，用户如果输入3次错误就会显示解锁的按钮，而注册的按钮也不能再使用，当点击解锁时，可以再进行注册。

JavaScript实现表单验证_02的更多相关文章

  1. 第一百五十四节，封装库--JavaScript，表单验证--提交验证

    封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...

  2. 第一百五十三节，封装库--JavaScript，表单验证--备注字数验证

    封装库--JavaScript,表单验证--备注字数验证 效果图 html <div id="reg"> <h2 class="tuo"> ...

  3. 第一百五十二节，封装库--JavaScript，表单验证--年月日注入

    封装库--JavaScript,表单验证--年月日注入 效果图 html <div id="reg"> <h2 class="tuo"> ...

  4. 第一百五十一节，封装库--JavaScript，表单验证--密码确认验证--回答验证--电子邮件验证加自动补全

    封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全 效果图 html <div id="reg"> <h2 class ...

  5. 第一百五十节，封装库--JavaScript，表单验证--密码验证

    封装库--JavaScript,表单验证--密码验证 效果图 html <div id="reg"> <h2 class="tuo">& ...

  6. 第一百四十九节，封装库--JavaScript，表单验证--验证用户名

    封装库--JavaScript,表单验证--验证用户名 注册验证功能,顾名思义就是验证表单中每个字段的合法性,如果全部合法才可以提交表单. 效果图 聚集光标时 信息不合法是 信息合法时 html &l ...

  7. JavaScript：表单验证模型

    之前做的验证提示以弹框的形式出现太丑陋了,不符合标准的验证提示.如果要想进行更好的数据验证操作,那么必须进行一些模块化设计,通过表单样式的改变来提示.其实,一般的数据验证无非就是那么几种,例如: 大多 ...

  8. JavaScript常用表单验证正则表达式（身份证、电话号码、邮编、日期、IP等）

    身份证正则表达式 //身份证正则表达式(15位)isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//身份证正则表达式 ...

  9. JavaScript之表单验证讲解

    JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些 ...

随机推荐

  1. CentOS下samba配置心得（smb和nmb都要启动）

    印象中以前多次配置成功过,重新配置就把以前的资料找出来: yum安装 samba samba-client samba-swat,然后配置参见:http://www.cnblogs.com/mchin ...

  2. nginx: [error] invalid PID number "" in "/usr/local/webserver/nginx/logs/nginx.pid" （原）

    进入nginx文件下,例如 :/usr/local/nginx/sbin [root@iZ25f7emo7cZ /]# cd /usr/local/nginx/sbin 运行命令: [root@iZ2 ...

  3. react-redux 使用后台数据初始化（渲染）界面

    注:首先在redux中改变state只能通过action操作,reducers改变state 在组件中 store.js import { createStore } from "redux ...

  4. [4]Windows内核情景分析---内核对象

    写过Windows应用程序的朋友都常常听说"内核对象"."句柄"等术语却无从得知他们的内核实现到底是怎样的, 本篇文章就揭开这些技术的神秘面纱. 常见的内核对象 ...

  5. Vue系列之 => 使用第三方animated.css动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. RepRap Prusa i3 平台自動補正

    RepRap Prusa i3 平台自動補正 平台校正不但費時,而且經常失敗,時在是很令人洩氣!期盼了好一陣子,Marlin終於將平台自動補正的功能加進來了!!這個功能將原本Z軸的Endstop,改裝 ...

  7. Yii数据对象笔记

    要执行一个SQL查询,应该遵循以下步骤 - 创建一个 yii\db\Command 的 SQL查询命令 绑定参数(非必须) 执行命令 第1步 - 创建一个 actionTestDb()方法在 Site ...

  8. 【Linux学习五】文本处理

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 一.cut:显示切割的行数据f:选择显示的列s:不显示没有分隔符的行d ...

  9. 多线程(threading)示例

    一.多线程简单示例 import threading,time print('第一线程(默认):程序开始啦!') def takeANap(): time.sleep(5) print('第二线程:5 ...

  10. PCB 布线，直角线，差分线，蛇形线

    1.直角线 直角走线的一般标准是PCB布线中要尽量避免的情况,也几乎成为衡量布线好坏的标准之一. 直角走线对信号的影响主要体系那在下面三个方面 1.保教可以等效为传输线是哪个的容性负载,减缓上升时间. ...