Goal: use jquery for form Validation.
Function: 1. The required option is followed by a small red star;
2. Select Start input, the input text box will change the current background color, enhance the user experience;
3. Enter the time to start verification, when the input format is correct will be reminded that is currently still in the input box, or click the Submit button;
4. Set the reset button and click Reset to clear all contents of the text box.
:
HTML code:
1 <!DOCTYPE HTML Public "-//w3c//dtd XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">2 <HTMLxmlns= "http://www.w3.org/1999/xhtml">3 <Head>4 <MetaCharSet=utf-8 "/>5 <title></title>6 </Head>7 <Body>8 9 <formMethod= "post"Action="">Ten <Divclass= "int"> one <label for= "username">User Name:</label> a <inputtype= "text"ID= "username"class= "required" /> - </Div> - <Divclass= "int"> the <label for= "email">Mailbox:</label> - <inputtype= "text"ID= "email"class= "required" /> - </Div> - <Divclass= "int"> + <label for= "personinfo">Personal information:</label> - <inputtype= "text"ID= "personinfo" /> + </Div> a <Divclass= "sub"> at <inputtype= "submit"value= "submit"ID= "send"/><inputtype= "reset"ID= "res"/> - </Div> - </form> - - </Body> - </HTML>
CSS Code:
1 Body{Font:12px/19px Arial, Helvetica, sans-serif;Color:#666;}2 Form Div{margin:5px 0;}3 . int label{float: left;width:100px;text-align: right;}4 . int input{padding:1px 1px;Border:1px solid #ccc;Height:16px;}5 . Sub{Padding-left:100px;}6 . Sub input{Margin-right:10px; }7 . Formtips{width:200px;margin:2px;padding:2px;}8 . OnError{9 background:#FFE0E9 URL (.. /img/reg3.gif) no-repeat 0 Center;Ten Padding-left:25px; one} a . onsuccess{ - background:#E9FBEB URL (.. /img/reg4.gif) no-repeat 0 Center; - Padding-left:25px; the} - . high{ - Color:Red; -} + - . Focus{ + Border:1px solid #f00; a background:#fcc; at}
jquery code:
1<script type= "text/javascript" >3$(function(){4 5 6 //2. If required, add the Red Star Logo.7$ ("form:input.required"). each (function(){8 var$required = $ ("<strong class= ' high ' > *</strong>");//Creating Elements9$( this). Parent (). Append ($required);//and append it to the Document.Ten }); one a - //3. Start validation after the text box loses focus -$ (' form:input '). Blur (function(){ the var$parent = $ ( this). Parent (); -$parent. Find (". Formtips")). Remove (); - - + //3.1 Verifying the user name - if( $( this). is (' #username ') ){ + if( this. value== "" | | this. value.length < 6 ){ a varerrormsg = ' Please enter a user name of at least 6 Bits. '; at$parent. Append (' <span class= ' formtips onError ' > ' +errormsg+ ' </span> '); -}Else{ - varokmsg = ' Input Correct. '; -$parent. Append (' <span class= ' formtips onsuccess ' > ' +okmsg+ ' </span> '); - } - } in - //3.2 Verifying Messages to if( $( this). is (' #email ') ){ + if( this. value== "" | | ( this. value!= "" &&!/[email Protected]+\. [a-za-z] {2,4}$/.test ( this. Value)) ){ - varerrormsg = ' Please enter the correct e-mail address. '; the$parent. Append (' <span class= ' formtips onError ' > ' +errormsg+ ' </span> '); *}Else{ $ varokmsg = ' Input Correct. ';Panax Notoginseng$parent. Append (' <span class= ' formtips onsuccess ' > ' +okmsg+ ' </span> '); - } the } + a //3.3 Implementation side input side verification the}). KeyUp (function(){ +$( this). Triggerhandler ("blur"); -}). Focus (function(){ $$( this). Triggerhandler ("blur"); $});//End Blur - - the //3.4 submission, Final Verification. -$ (' #send '). Click (function(){Wuyi$ ("form:input.required"). trigger (' Blur ')); the varNumerror = $ (' form. onError '). length; - if(numerror) { wu return false; - } aboutAlert ("registration is successful, password has been sent to your mailbox, please Check.")); $ }); - - //4. reset -$ (' #res '). Click (function(){ a$ (". formtips"). Remove (); + }); the - //1. Select the input box color $$ (": input"). Focus (function(){ the$( this). AddClass ("focus"); the}). Blur (function(){ the$( this). Removeclass ("focus"); the }); - in the }) the about</script>
This case is based on jQuery1.7, so additional jquery needs to be Introduced.
jquery Form Validation Case