贴一个登录验证的代码

前言：虽然代码简单，但是有些还是有借鉴意义的(^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>

View Code

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 }

View Code

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();

View Code

大概界面如下：