JavaScript-like NetEase pass form verification _ javascript skills

This article mainly introduces how to verify the form of a pass similar to NetEase using JavaScript. it is very practical. if you need it, you can refer to it. It's good to introduce form verification:

CSS code

@ Charset "gb2312";/* CSS Document */body, dl, dt, dd, p, form {padding: 0; margin: 0 ;}# header, # main {width: Pixel px; margin: 0 auto ;}. bg {background-image: url (.. /images/register_bg.gif); background-repeat: no-repeat; width: 6px; height: 6px ;}. bg_top_left {background-position: 0px 0px ;}. bg_top_right {background-position: 0px-6px ;}. bg_end_left {background-position: 0px-12px ;}. bg_end_right {background-position: 0px-18px ;}. bg_top {border-top: solid 1px #666666 ;}. bg_end {border-bottom: solid 1px #666666 ;}. bg_left {border-left: solid 1px #666666 ;}. bg_right {border-right: solid 1px #666666 ;}. content {padding: 10px ;}. inputs {border: solid 1px # a4c8e0; width: 150px; height: 15px ;}. userWidth {width: 110px ;}. content p {float: left; font-size: 12px; color: #000 ;}dl {clear: both ;}dt, dd {float: left ;}dt {width: 130px; text-align: right; font-size: 14px; height: 30px; line-height: 25px;} dd {font-size: 12 px; color: #666666; width: 180px;}/* the text style is displayed when you place the cursor in the text box */. import_prompt {border: solid 1px # ffcd00; background-color: # ffffda; padding-left: 5px; padding-right: 5px; line-height: 20px ;} /* when the text box content does not meet the requirements, the text style */. error_prompt {border: solid 1px # ff3300; background-color: # fff2e5; background-image: url (.. /images/li_err.gif); background-repeat: no-repeat; background-position: 5px 2px; padding: 2px 5px 0px 25px; line-height: 20px ;} /* when the text box content is entered correctly, the text style is displayed */. OK _prompt {border: solid 1px #01be00; background-color: # e6fee4; background-image: url (.. /images/li_ OK .gif); background-repeat: no-repeat; background-position: 5px 2px; padding: 2px 5px 0px 25px; line-height: 20px ;}

Js

// JavaScript Document/* common method for getting HTML objects by ID. use $ to replace the function name */function $ (elementId) {return document. getElementById (elementId);}/* When you place the cursor in the pass username text box, the text and style */function userNameFocus () {var userNameId = $ ("userNameId"); userNameId is displayed. className = "import_prompt"; userNameId. innerHTML = "1. it consists of letters, numbers, underscores, dots, and minus signs.
2. it can only start or end with a number or letter, and the length is 4-18 ";}/* when the mouse leaves the pass username text box, the text and style */function userNameBlur () is prompted () {var userName = $ ("userName"); var userNameId = $ ("userNameId"); var reg =/^ [0-9a-zA-Z] [0-9a-zA-Z _. -] {2, 16} [0-9a-zA-Z] $/; if (userName. value = "") {userNameId. className = "error_prompt"; userNameId. innerHTML = "The pass user name cannot be blank. enter the pass user name"; return false;} if (reg. test (userName. value) = false) {userNameId. className = "error_prompt"; userNameId. innerHTML = "1. it consists of letters, numbers, underscores, dots, and minus signs.
2. it can only start or end with a number or letter, and the length is 4-18 "; return false;} userNameId. className = "OK _prompt"; userNameId. innerHTML = "pass username entered correctly"; return true;}/* when the cursor is placed in the password text box, the text and style are displayed */function pwdFocus () {var pwdId = $ ("pwdId"); pwdId. className = "import_prompt"; pwdId. innerHTML = "password length: 6-16";}/* when the mouse leaves the password text box, the text and style are displayed */function pwdBlur () {var pwd = $ ("pwd"); var pwdId = $ ("pwdId"); if (pwd. value = "") {pwdId. className = "error_prompt"; pwdId. inn ErHTML = "The password cannot be blank. enter the password"; return false;} if (pwd. value. length <6 | pwd. value. length> 16) {pwdId. className = "error_prompt"; pwdId. innerHTML = "The password length is 6-16"; return false;} pwdId. className = "OK _prompt"; pwdId. innerHTML = "correct password input"; return true;}/* when the mouse leaves the repeated password text box, the text and style are displayed */function repwdBlur () {var repwd = $ ("repwd"); var pwd = $ ("pwd"); var repwdId = $ ("repwdId"); if (repwd. value = "") {repwdId. className = "error_prompt"; RepwdId. innerHTML = "repeated passwords cannot be blank. please enter the password again"; return false;} if (repwd. value! = Pwd. value) {repwdId. className = "error_prompt"; repwdId. innerHTML = "The two passwords are inconsistent. please enter"; return false;} repwdId. className = "OK _prompt"; repwdId. innerHTML = "The two passwords are entered correctly"; return true;}/* when the mouse is placed in the nickname text box, the text and style are displayed */function nickNameFocus () {var nickNameId = $ ("nickNameId"); nickNameId. className = "import_prompt"; nickNameId. innerHTML = "1. contains Chinese characters, letters, numbers, underlines, and @! # $ % & * Special characters
2. the length is 4-20 characters.
3. a Chinese character occupies two characters ";}/* when the mouse leaves the nickName text box, the text and style are displayed */function nickNameBlur () {var nickName = $ (" nickName "); var nickNameId = $ ("nickNameId"); var k = 0; var reg =/^ ([\ u4e00-\ u9fa5] | \ w | [@! # $ % & *]) + $/; // Match the nickName var chinaReg =/[\ u4e00-\ u9fa5]/g; // match the Chinese character if (nickName. value = "") {nickNameId. className = "error_prompt"; nickNameId. innerHTML = "the nickname cannot be blank. enter the nickname"; return false;} if (reg. test (nickName. value) = false) {nickNameId. className = "error_prompt"; nickNameId. innerHTML = "can only contain Chinese characters, letters, numbers, underscores, and @! # $ % & * Special characters "; return false;} var len = nickName. value. replace (chinaReg, "AB "). length; // converts a Chinese character into two letters to calculate the length of the if (len <4 | len> 20) {nickNameId. className = "error_prompt"; nickNameId. innerHTML = "1. length: 4-20 characters
2. one Chinese character occupies two characters "; return false;} nickNameId. className = "OK _prompt"; nickNameId. innerHTML = "Enter the nickname correctly"; return true;}/* the text and style */function telFocus () prompt is displayed when the cursor is placed in the text box of the associated mobile phone number () {var telId = $ ("telId"); telId. className = "import_prompt"; telId. innerHTML = "1. the mobile phone number starts
2. the mobile phone number consists of 11 digits ";}/* when the mouse leaves the associated mobile phone number text box, the text and style are displayed */function telBlur () {var tel = $ ("tel"); var telId = $ ("telId"); var reg =/^ (13 | 15 | 18) \ d {9} $/; if (tel. value = "") {telId. className = "error_prompt"; telId. innerHTML = "The associated mobile phone number cannot be blank. enter the associated mobile phone number"; return false;} if (reg. test (tel. value) = false) {telId. className = "error_prompt"; telId. innerHTML = "The associated mobile phone number is incorrect. please enter"; return false;} telId. className = "OK _prompt"; telId. innerHTML = "The associated mobile phone number is entered correctly"; return true;}/* the text and style */function emailFocus () prompt is displayed when the mouse is placed in the confidential email text box () {var emailId = $ ("emailId"); emailId. className = "import_prompt"; emailId. innerHTML = "enter your frequently used email address";}/* When you move the mouse away from the secure email text box, the text and style are displayed */function emailBlur () {var email = $ ("email"); var emailId = $ ("emailId"); var reg =/^ \ w + @ \ w + (\. [a-zA-Z] {2, 3}) {1, 2} $/; if (email. value = "") {emailId. className = "error_prompt"; emailId. innerHTML = "the confidential email address cannot be blank. enter the confidential email address"; return false;} if (reg. test (email. value) = false) {emailId. className = "error_prompt"; emailId. innerHTML = "the confidential email format is incorrect. please enter"; return false;} emailId. className = "OK _prompt"; emailId. innerHTML = "correct confidential email input"; return true;}/* verify the validity of the form content input when the form is submitted */function checkForm () {var flagUserName = userNameBlur (); var flagPwd = pwdBlur (); var flagRepwd = callback (); var flagNickName = nickNameBlur (); var flagTel = telBlur (); var flagEmail = emailBlur (); userNameBlur (); pwdBlur (); repwdBlur (); nickNameBlur (); telBlur (); emailBlur (); if (flagUserName = true & flagPwd = true & flagRepwd = true & flagNickName = true & flagTel = true & flagEmail = true) {return true;} else {return false ;}}

Html

! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 New user registration page