注册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. [LeetCode] 577. Employee Bonus_Easy tag: SQL

    Select all employee's name and bonus whose bonus is < 1000. Table:Employee +-------+--------+---- ...

  2. TensorFlow读取CSV数据

    代码来源于官方文档,做了一些小小的调整: # -*- coding:utf-8 -*- import tensorflow as tf filename_queue = tf.train.string ...

  3. 第一章入门篇CSS样式的分类、盒模型

    1.CSS样式的分类 CSS样式分为一项4种: 1.内联样式表,直接写在元素style属性里面的样式,如 <p style="color:red;">内联样式</ ...

  4. undefined reference 问题各种情况分析

    扒自网友文章 关于undefined reference这样的问题,大家其实经常会遇到,在此,我以详细地示例给出常见错误的各种原因以及解决方法,希望对初学者有所帮助. 1.  链接时缺失了相关目标文件 ...

  5. POJ 3233 Matrix Power Series(二分等比求和)

    Matrix Power Series [题目链接]Matrix Power Series [题目类型]二分等比求和 &题解: 这题我原来用vector写的,总是超时,不知道为什么,之后就改用 ...

  6. Koa中设置中文Cookie值

    默认情况下, 如果 ctx.cookies.set('user', '杨过', { domain: 'xxxx', path: 'xxxx', maxAge: 24 * 60 * 60 * 1000, ...

  7. CentOS中利用Docker安装RabbitMQ

    CentOS中利用Docker安装RabbitMQ 1.拉取镜像(带管理平台) #docker pull rabbitmq:3.7.7-management 2.启动容器: #docker run - ...

  8. pip install pyinstaller

    C:\Users\coder211\Desktop>pip install pyinstallerCollecting pyinstaller Downloading PyInstaller-3 ...

  9. python ---多线程thread

    thread 在数据预处理的时候用处不大,因为有GIL 锁 查看thread信息 import threading print(threading.current_thread()) print(th ...

  10. python 数据较大 性能分析

    前提:若有一个几百M的文件需要解析,某个函数需要运行很多次(几千次),需要考虑性能问题 性能分析模块:cProfile 使用方法:cProfile.run("func()"),其中 ...