JavaScript-like Netease pass form verification _ javascript skills

Source: Internet
Author: User
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
 
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.