pwdText.style.color = "red"; pwdText.style.fontSize = "13px"; } else { pwdText.innerHTML = ""; } }; //重复密码设置 pwdTwo.onblur = function() { var pwdV = document.querySelector("#pwd").value; var pwdTwoV = document.querySelector("#pwdTwo").value; if (pwdV ! = pwdTwoV) { pwdTwoText.innerHTML = "两次密码不一致"; pwdTwoText.style.color = "red"; pwdTwoText.style.fontSize = "13px"; } else { pwdTwoText.innerHTML = ""; } }; //密码框图标改变 var pwdImg = document.querySelector("#pwdImg"); pwdImg.onclick = function(){ if(pwd.type = "password"){ pwd.type="text"; pwdImg.src="img/显示.jpg"; }else{ pwd.type="password"; pwdImg.src="img/隐藏.jpg"; } }; phone.onblur=function(){ var phoneV = document.querySelector("#phone").value; var reg3 = /^1[3-9]{1}[0-9]{9}$/ if (phoneV.length == 0) { phoneText.innerHTML = "手机号码不能为空"; phoneText.style.color = "red"; phoneText.style.fontSize = "13px"; } else if (phoneV.length < 13) { phoneText.innerHTML = "手机号不能小于13"; phoneText.style.color = "red"; phoneText.style.fontSize = "13px"; } else if (phoneV.length > 13) { phoneText.innerHTML = "手机号不能大于13"; phoneText.style.color = "red"; phoneText.style.fontSize = "13px"; } else { phoneText.innerHTML = ""; } }; }; </script> </head> <body> <table> <tr> <td>账号:</td> <td> <input type="text" id="username" /> </td> <td id="usernameText"> </td> </tr> <tr> <td>密码:</td> <td id="pwdTd"> <input type="password" id="pwd" /> < img src="img/隐藏.jpg " id="pwdImg" /> </td> <td id="pwdText"> </td> </tr> <tr> <td>重复密码:</td> <td id="pwdTwoTd"> <input type="password" id="pwdTwo" /> < img src="img/隐藏.jpg " /> </td>
时间: 2023-05-19 12:06:58 浏览: 82
这段代码是用来设置密码输入框的样式和验证密码是否一致的。当密码输入框失去焦点时,会检查密码是否符合要求,如果不符合要求,则会将密码输入框的文字颜色设置为红色,字体大小设置为13px;如果符合要求,则清空密码输入框的内容。同时,还会检查重复密码是否与密码一致,如果不一致,则会提示用户重新输入。
相关问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table { text-align: right; } #pwdTd> img,#pwdTwoTd > img { width: 17px; height: 15px; position: absolute; right: 5px; top: 5px; } #pwdTd,#pwdTwoTd { position: relative; } </style> <script type="text/javascript"> window.onload = function() { var username = document.querySelector("#username"); var pwd = document.querySelector("#pwd"); var pwdTwo = document.querySelector("#pwdTwo"); var usernameText = document.querySelector("#usernameText"); var pwdText = document.querySelector("#pwdText"); var pwdTwoText = document.querySelector("#pwdTwoText"); var phone = document.querySelector("#phone"); var phoneText = document.querySelector("#phoneText"); //绑定失去焦点事件 username.onblur = function() { var usernameV = document.querySelector("#username").value; if (usernameV.length == 0) { usernameText.innerHTML = "账号不能为空"; usernameText.style.color = "red"; usernameText.style.fontSize = "13px" } else { usernameText.innerHTML = ""; } }; username.onfocus = function() { //pwdText.innerHTML = ""; }; //给密码框设置焦点事件 pwd.onblur = function() { var pwdV = document.querySelector("#pwd").value; var reg1 = /^[0-9]{6,20}$/; var reg2 = /^[A-z]{6,20}$/; if (pwdV.length == 0) { pwdText.innerHTML = "密码不能为空"; pwdText.style.color = "red"; pwdText.style.fontSize = "13px"; } else if (pwdV.length < 6) { pwdText.innerHTML = "密码长度不能小于六位"; pwdText.style.color = "red"; pwdText.style.fontSize = "13px"; } else if (reg1.test(pwdV)) { pwdText.innerHTML = "密码过于简单(不能是纯数字)"; pwdText.style.color = "red"; pwdText.style.fontSize = "13px"; } else if (reg2.test(pwdV)) { pwdText.innerHTML = "密码过于简单(不能是纯英文)";
这是一个HTML文档的开头部分,其中包含了一些元素和属性。其中,<!DOCTYPE html>是文档类型声明,告诉浏览器这是一个HTML5文档。<html>是HTML文档的根元素,包含了整个文档的内容。<head>是文档头部元素,包含了一些元数据,如字符集、标题、样式表等。<meta charset="utf-8">是设置文档的字符集为UTF-8,确保文档中的中文等非ASCII字符能够正确显示。<title>是设置文档的标题,显示在浏览器的标签页上。<style type="text/css">是定义文档的样式表,其中table { text-align: right; }是设置表格中的文本对齐方式为右对齐。
阅读全文