注册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. Git push remote rejected {change ### closed}

    是因为和关掉的提交对应的Change_id一样导致的. 另一种可能是cherry-pick导致的: 之前提交的时候因为有merge,所以在gerrit服务器上审核的时候,我给abandoned了,因此 ...

  2. linux curl命令如何上传本地文件夹和下载文件

    本地有一个文件夹为my_dir,里面有四个文件,分别是test1.txt,user_account,tools_user,plans 要把这个my_dir文件夹传到ftp 192.168.8.251 ...

  3. PHP获取访客ip、系统、浏览器等信息[转]

    1.获取访客操作系统信息   <?php   function GetOs() {   if (!empty($_SERVER['HTTP_USER_AGENT'])) {   $OS = $_ ...

  4. gdb强制生成core文件

    如何为自己的进程产生core 文件,又不想退出这个进程? 系统只在程序崩溃退出时自动产生core file. 有的人像自己处理异常信号,然后自己产生一个core file,然后继续运行.那该怎么办呢? ...

  5. 16.和input相关的知识点

    1.改变input里面placeholder颜色 <input class="pre_name" type="text" placeholder=&quo ...

  6. kettle杂记

    版本8.0,以下是我在使用kettle时候的一些小tips 1.“插入/更新”必须指定字段,“表输出”无需指定字段,但是源表的字段必须包含在目标表中,否则unknown colum! 2.连接数据库时 ...

  7. Unity shader学习之屏幕后期处理效果之高斯模糊

    高斯模糊,见 百度百科. 也使用卷积来实现,每个卷积元素的公式为: 其中б是标准方差,一般取值为1. x和y分别对应当前位置到卷积中心的整数距离. 由于需要对高斯核中的权重进行归一化,即使所有权重相加 ...

  8. word论文之图和表目录制作

    https://jingyan.baidu.com/article/91f5db1b3c539f1c7e05e341.html?qq-pf-to=pcqq.c2c 1.目标: (1)图目录. (2)表 ...

  9. ECC

    素数 prime,又称为质数,是指,除了1和它本身,没有其他因数的数. 素数的定理: 1)在一个大于1的数a和它的2倍之间必定存在至少一个素数: 素数的性质: 1)在所有的大于10的质数中,个位数,只 ...

  10. hdu5290树形dp

    题意 给了n个点的数 每个点有一个w[i]权值,如果你选择了i这个点那么距离i这个点距离为w[i]的点将被除去,最后问 选则尽量少的点把这n个点全部删除 1<=n<=100000, 0&l ...