JavaScript implements Form Verification like Netease pass and javascript Form Verification

JavaScript implements Form Verification like Netease pass and javascript Form Verification

It's good to introduce Form Verification:

CSS code

@ Charset "gb2312";/* CSS Document */body, dl, dt, dd, div, 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 div {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 <br/> 2. It can only start or end with a number or letter and can be 4-18 ";} /* When the mouse leaves the pass userName text box, the text and style are displayed */function userNameBlur () {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 <br/> 2. It can only start or end with a number or letter and can be 4-18 "; return false;} userNameId. className = "OK _pr Ompt "; 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. innerHTML = "the password cannot be blank. Enter the password"; return false;} if (pwd. value. length <6 | pwd. v Alue. 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. valu E! = 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 <br/> 2. The length is 4-20 characters <br/> 3. One 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. The length is 4-20 characters <br/> 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. Mobile phone numbers start with, 18 <br/> 2. Mobile phone numbers consist of 11 digits";}/* When the mouse leaves the text box of the associated mobile phone number, prompt text and style */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"> 
The above is all the content of this article. I hope you will like it.