表单验证通过输入框获取用户输入的密码，如果输入密码为“happy123”,则显示“密码输入正确”，否则提示“密码输入错误”,如果输入三次，显示提示信息“三分钟后在尝试”

功能:简单的表单验证,密码输入次数控制,定时器控制可输入提醒,密码匹配

Html:请忽略界面设计,没时间做

<form><input id="userName" type="text" placeholder="请输入用户名" onblur="checkUserName()"/><br /><input id="userPassword" type="password" placeholder="请输入密码" onclick="inputPassWord()" onblur="checkPassWord()"/><br /><input id="verificationCode"  style="width:80px" type="text" placeholder="请输入验证码" /><img style="width: 70px;height: 20px;" src="../../img/verificationCode.jpg"/>
</form>
<button style="margin:20px;background: pink;" onclick="checkCode()">登录</button>

js:

var userName = document.getElementById("userName");
var userPassword = document.getElementById("userPassword");
var verificationCode = document.getElementById("verificationCode");
var inputTimes = 0;       //密码输入次数
var canInput = true;    //密码框是否可以输入
//登录按钮点击事件
function checkCode(){if(userName.value == ""){alert("请输入用户名!");}else{if (userPassword.value == "happy123"&&verificationCode.value=="7364") {alert("登录成功!");}if (userPassword.value != "happy123") {alert("密码错误!");verificationCode.value = "";}if(verificationCode.value!="7364"){alert("验证码错误!");}    }
}
//密码输入离开
function checkPassWord(){inputTimes = inputTimes + 1;
}
//密码输入点击事件
function inputPassWord(){if (inputTimes>2) {alert("请三分钟后在尝试!");//定时器3分钟,inputTimes = 0;setTimeout(function(){inputTimes = 0;},180000);}
}

表单验证通过输入框获取用户输入的密码，如果输入密码为“happy123”,则显示“密码输入正确”，否则提示“密码输入错误”,如果输入三次，显示提示信息“三分钟后在尝试”相关推荐

表单验证手机号输入框
最近有点时间抠了一些细节, 之前项目的表单验证比较奔放, 比如H5手机号输入框,可以输入文字, 移动端点击弹出来的键盘不是数字键盘, 今天找了点时间优化一下先上最终效果这里主要是做了两点 1. i ...
vue表单验证 input输入框禁止输入空格
测试小姐姐让输入框不允许输入空格,安排. 刚开始用的下面这个方法,因为我是电脑端f12的情况下调试移动端,所以下面这个方法可以实现禁止输入空格,于是就打包测试上线了,上线后才发现真机中不支持,应该是p ...
表单验证设计的用户体验基本原则
转自:http://www.oschina.net/translate/ux-form-validation?from=20130331 英文原文:The Ultimate UX Design of ...
JS源代码实现表单验证
今天要用JavaScript正则做一个表单验证 1.首先是HTML结构 <form action="#">账号:<input type="text&qu ...
黑客登录界面科幻黑色主题网页模板表单验证代码
黑客登录界面科幻黑色主题网页模板表单验证代码效果: html代码: <!DOCTYPE html> <html lang="en"><head> ...
利用jQuery.validator来做表单验证，不要太轻松（全攻略）
1.介绍 jQuery.validator是给我们用来做表单验证提交时的一个插件,你可以直接去官网下载,也可以通过菜鸟教程学习和下载该插件菜鸟教程(jQuery.validator) 2.使用 2. ...
angularjs php登录验证,AngularJs表单验证的方法
Anjularjs表单验证能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的.在人与人沟通的语境中,表单验证给出来的反馈同获得正确输入同等重要. 表单验证不仅能给用户提供有用的反馈,同时也能 ...
使用jquery validate结合zui作表单验证
1.引入jquery validate和zui  <script src="${_b ...
element ui 表单验证通过后没有绿色框求解（已解）
使用element自带的表单验证. 输入框选中状态边框为蓝色, 输入框输入错误的时候边框为红色, 输入正确的时候边框为绿色. 但是有的时候输入正确没有出现绿色(红色和蓝色状态能正常出现) 我的相关代码 ...

表单验证通过输入框获取用户输入的密码，如果输入密码为“happy123”,则显示“密码输入正确”，否则提示“密码输入错误”,如果输入三次，显示提示信息“三分钟后在尝试”

表单验证通过输入框获取用户输入的密码，如果输入密码为“happy123”,则显示“密码输入正确”，否则提示“密码输入错误”,如果输入三次，显示提示信息“三分钟后在尝试”相关推荐

最新文章

热门文章