判断表单文本框（失去焦点就判断）

最新推荐文章于 2023-06-25 15:29:07 发布

weixin_33796205

最新推荐文章于 2023-06-25 15:29:07 发布

阅读量574

点赞数

文章标签：数据库

原文链接：http://www.cnblogs.com/Shirley-He/p/5023938.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
label {
display: inline-block;
width: 80px;
text-align: right;
 }
span {
color: red;
 }
</style>
</head>
<body>
<p><label for="username">用户名：</label><input type="text" id="username" οnblur="usernameOnblur()" οnkeydοwn="usernameEnterEvent(event)" /><span id="usernameWarn"></span></p>
<p><label for="password">密码：</label><input type="password" id="password" οnblur="passwordOnblur()" οnkeydοwn="passwordEnterEvent(event)"/><span id="passwordWarn"></span></p>
<p><label for="repassword">确认密码：</label><input type="password" id="repassword" οnblur="repasswordOnblur()" οnkeydοwn="repasswordEnterEvent(event)"/><span id="repasswordWarn"></span></p>
<p><button οnclick="register()">注册</button></p>
</body>
<script>
var usernameEle = document.getElementById("username");
var usernameWarnEle = document.getElementById("usernameWarn");
var usernameRegExp = /^(\w+@\w+\.\w+)|(1[3458]\d{9})$/;

var passwordEle = document.getElementById("password");
var passwordWarnEle = document.getElementById("passwordWarn");
var passwordRegExp = /^[0-9a-zA-Z]{6,12}$/;

var repasswordEle = document.getElementById("repassword");
var repasswordWarnEle = document.getElementById("repasswordWarn"); function registerValidate() { var count = 0; //清空所有验证 usernameWarnEle.innerHTML = ""; passwordWarnEle.innerHTML = ""; repasswordWarnEle.innerHTML = ""; //验证用户名 count += usernameValidate(); //验证密码 count += passwordValidate(); //确认密码 count += repasswordValidate(); return count === 0 ? true : false; } //注册 function register() { //验证 var flag = registerValidate(); if (flag) { location.href = "hi.html"; } else { alert("注册失败"); } } //验证用户名 function usernameValidate() { usernameWarnEle.innerHTML = ""; if (usernameEle.value == "") { usernameWarnEle.innerHTML = "用户名不能为空！"; return 1; } else if (!usernameRegExp.test(usernameEle.value)) { usernameWarnEle.innerHTML = "用户名只能是邮箱或手机号码！"; return 1; } return 0; } //验证密码 function passwordValidate() { passwordWarnEle.innerHTML = ""; if (passwordEle.value == "") { passwordWarnEle.innerHTML = "密码不能为空！"; return 1; } else if (!passwordRegExp.test(passwordEle.value)) { passwordWarnEle.innerHTML = "密码只能由6到12位的英文字母或数字组成！"; return 1; } return 0; } //验证确认密码 function repasswordValidate() { repasswordWarnEle.innerHTML = ""; if (repasswordEle.value == "") { repasswordWarnEle.innerHTML = "密码不能为空！"; return 1; } else if (passwordEle.value != repasswordEle.value) { repasswordWarnEle.innerHTML = "输入的密码不一致！"; console.info(passwordEle.value); return 1; } return 0; } //用户名失去焦点 function usernameOnblur() { //验证用户名 usernameValidate(); } //用户名失去焦点 function passwordOnblur() { //验证用户名 passwordValidate(); } //用户名失去焦点 function repasswordOnblur() { //验证用户名 repasswordValidate(); } //用户名回车事件 function usernameEnterEvent(event) { var eventObj = event || window.event; if (eventObj.keyCode === 13) { passwordEle.focus(); } } //密码回车事件 function passwordEnterEvent() { var eventObj = event || window.event; if (eventObj.keyCode === 13) { repasswordEle.focus(); } } //密码回车事件 function passwordEnterEvent() { var eventObj = event || window.event; if (eventObj.keyCode === 13) { repasswordEle.focus(); } }</script></html>

转载于:https://www.cnblogs.com/Shirley-He/p/5023938.html

weixin_33796205

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
判断表单文本框（失去焦点就判断）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> label { display: inline-block; width: ...
复制链接

扫一扫