前言：虽然代码简单，但是有些还是有借鉴意义的(^o^)/~
html代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>登录界面</title> 6 <link rel="stylesheet" href="style.css"> 7 </head> 8 <body> 9 <form> 10 <div id="userName"> 11 <p class="userNameText">用户名</p> 12 <input id="userNameInput" type="text" placeholder="您的账户和登录名" onchange="checkUserName()"> 13 </div> 14 <div id="setPassword"> 15 <p class="setPasswordText">设置密码</p> 16 <input id="setPasswordInput" type="password" placeholder="建议至少使用两种字符组合" onchange="checkSetPassword()"> 17 </div> 18 <div id="confirmPassword"> 19 <p class="confirmPasswordText">确认密码</p> 20 <input id="confirmPasswordInput" type="password" placeholder="请再次输入密码" onchange="checkConfirmPassword()"> 21 </div> 22 <div id="phone"> 23 <p class="phoneText">手机验证</p> 24 <input id="phoneInput" type="text" placeholder="建议使用常用手机" onchange="checkPhone()"> 25 </div> 26 <div id="verificationCode"> 27 <p class="verificationCodeText">验证码</p> 28 <input id="verificationCodeInput" type="text" placeholder="请输入验证码" onchange="checkCode()"> 29 <div class="showCode"></div> 30 </div> 31 </form> 32 33 <script src="main.js"></script> 34 </body> 35 </html>
css代码：
1 #userName,#setPassword,#confirmPassword,#phone,#verificationCode{ 2 width: 789px; 3 height: 104px; 4 margin: 0 auto; 5 border: 1px solid #dddddd; 6 position: relative; 7 } 8 9 #userNameInput,#setPasswordInput,#confirmPasswordInput,#phoneInput,#verificationCodeInput{ 10 width: 100%; 11 height: 100%; 12 padding-left: 198px; 13 font-size: 32px; 14 } 15 16 .userNameText ,.setPasswordText,.confirmPasswordText,.phoneText,.verificationCodeText{ 17 font-size: 32px; 18 color: #666666; 19 letter-spacing: 15px; 20 text-align: center; 21 position: absolute; 22 top: 3px; 23 left: 43px; 24 } 25 26 #setPassword,#confirmPassword,#phone,#verificationCode{ 27 margin-top: 30px; 28 } 29 .setPasswordText,.confirmPasswordText,.phoneText{ 30 letter-spacing: 2px; 31 } 32 .showCode{ 33 position: absolute; 34 top: 9px; 35 right: -187px; 36 width: 222px; 37 height: 93px; 38 /*background: red;*/ 39 text-align: center; 40 line-height: 93px; 41 font-size: 48px; 42 }
js代码：
1 /** 2 * Created by Administrator on 2016/9/12. 3 */ 4 var username = document.querySelector("#userNameInput"); 5 var setPassword = document.querySelector("#setPasswordInput"); 6 var confirmPassword = document.querySelector("#confirmPasswordInput"); 7 var phoneInput = document.querySelector("#phoneInput"); 8 var verificationCodeInput = document.querySelector("#verificationCodeInput"); 9 var showCode = document.querySelector(".showCode"); 10 11 function checkUserName() { 12 var uvl = username.value.length; 13 if (uvl == 0) { 14 alert("用户名不能为空!"); 15 } else if (uvl < 6 || uvl > 8) { 16 username.value = ""; 17 alert("用户名6到8位"); 18 } 19 } 20 function checkSetPassword() { 21 var csp = setPassword.value.length; 22 if (csp == 0) { 23 alert("密码不能为空"); 24 } else if (csp < 6 || csp > 8) { 25 setPassword.value = ""; 26 alert("密码6到8位"); 27 } 28 } 29 function checkConfirmPassword() { 30 var ccp = confirmPassword.value; 31 if (ccp != setPassword.value) { 32 console.log(ccp, setPassword.value); 33 confirmPassword.value = ""; 34 alert("两次输入密码不一致,请重新输入!"); 35 } 36 } 37 38 function checkPhone() { 39 var cp = phoneInput.value; 40 var cpre = /0?(13|14|15|18)[0-9]{9}/; 41 if (!cpre.test(cp)) { 42 phoneInput.value = ""; 43 alert("输入的不符合!请重新输入"); 44 } 45 } 46 47 var codeArr = []; 48 var codeArrStr = ""; 49 function creatCode() { 50 var selectImg = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg"]; 51 var imgIndex = Math.floor(Math.random() * selectImg.length); 52 showCode.style.background = "url(" + selectImg[imgIndex] + ")"; 53 showCode.style.backgroundSize = "100% 100%"; 54 var selectData = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", 55 "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "a", "s", "d", "f", "g", "h", "j", 56 "k", "l", "z", "x", "c", "v", "b", "n", "m", 57 "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "A", "S", "D", "F", "G", "H", "J", 58 "K", "L", "Z", "X", "C", "V", "B", "N", "M"]; 59 for (var r = 0; r < 4; r++) { 60 var randomNum = Math.floor(Math.random() * selectData.length); 61 codeArr.push(selectData[randomNum]); 62 } 63 for (var k = 0; k < codeArr.length; k++) { 64 showCode.innerHTML += codeArr[k]; 65 codeArrStr += codeArr[k]; 66 } 67 } 68 69 function checkCode() { 70 71 var cc = verificationCodeInput.value; 72 73 if (cc != codeArrStr) { 74 showCode.value = ""; 75 alert("验证码输入错误") 76 } 77 78 } 79 function init() { 80 creatCode(); 81 } 82 init();
大概界面如下：
