Home > Developer > JavaScript
After the user fills out the form submits, the server-side script verifies the data first, guarantees the data correctness (for example, the data conforms to the request content, the format is correct, etc.) and then the data to the database storage for later use. You can also use JavaScript on the client computer to verify forms, faster, more efficient user operations. While there are many advantages to using JavaScript for forms validation, some users may turn off browser JavaScript functionality or do not support JavaScript, so form validation on server-side scripts is essential.
The Nineth edition of the basic JavaScript tutorial [US · Dori Smith,tom Negrino] A method of validating a form and then combining its own memory to knock out the following code to verify that the form establishes a required field:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <title>Create Required Fields</title>5 <MetaCharSet= "Utf-8">6 <Linkrel= "stylesheet"type= "Text/css"href= "Style.css">7 <Scriptsrc= "Javascript.js"></Script>8 </Head>9 <Body>Ten <formAction="#"> One <P><label for= "UserName">Name:<inputtype= "text"size= "+"ID= "UserName"class= "Reqd"></label></P> A <P><label for= "Passwd1">Password:<inputtype= "Password"ID= "Passwd1"class= "Reqd"></label></P> - <P><label for= "Passwd2">Confirm Password:<inputtype= "Password"ID= "Passwd2"class= "Reqd passwd1"></label></P> - <P><inputtype= "Submit"value= "Submit"> <inputtype= "Reset"value= "Reset"></P> the </form> - </Body> - </HTML>
CSS file (style.css):
1 Body {color:#000; background-color: #fff;} 2 Input.invalid {Background-color: #ff9; border:2px red inset;} 3 Label.invalid {color:#f00; font-weight:bold;}JS (javascript.js):
1Window.onload =function(){2Document.forms[0].onsubmit =ValidForm;3 }4 functionValidForm () {5 varAllgood =true;6 varAllTags = Document.forms[0].getelementsbytagname ("*");7 for(vari=0;i<alltags.length;i++){8 if(!Validtag (Alltags[i])) {9Allgood =false;Ten } One } A returnAllgood; - functionValidtag (thistag) { - varOutclass = "";//used to restore all classes stored in a label the - //separate all classes in a label with a space separator - varallclasses = ThisTag.className.split (""); - for(varj=0;j<allclasses.length;j++){ +Outclass + = Validbasedonclass (Allclasses[j]) + ""; - //the Validbasedonclass function is used to determine whether a class in a label has a value reqd and if the user does not fill out a text box, if there is reqd and the user is not filled,
A value is appended to the current class, invalid, and the entire class "REQD invalid" is returned to the validbasedonclass here. See the code below for details. + } AThistag.classname =outclass; at if(Outclass.indexof ("invalid") >-1){ - Thistag.focus (); - if(thistag.nodename== "INPUT"){ - Thistag.select (); - } - return false; in } - return true; to + functionValidbasedonclass (thisclass) { - varClassback = ""; the Switch(thisclass) { * Case"": $ Case"Invalid":Panax Notoginseng Break; - Case"Reqd": the if(Allgood && Thistag.value = = ""){ +Classback = "Invalid"; A } theClassback + =ThisClass; + Break; - default: $Classback + =ThisClass; $ } - returnClassback; - } the } -}
Execution Result:
The above is just the validation required field, which is the most basic. Others, such as checking another field based on one field (such as if the password check is the same), the flag has a problematic field, a field is set according to one of the fields (such as the radio button above selects one of them, the check box below only selects certain options, etc.), validates the e-mail format, and so on. These are based on the code that validates the required fields and will be supplemented later.
Form validation with JavaScript
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
