Home > Developer > JavaScript
JavaScript setup Forms Basic validation
As follows:
1<! DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML 1.1//en" "Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >234<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>5<title> User Registration </title>6<style type= "Text/css" >7 body{8background-color: #FFF;9Background-image:url (images/1616.jpg);Tenbackground-repeat:no-repeat; Onebackground-size:1400px 230px; A } - #box { -font-size:20px; the color: #05032C; -margin-left:450px; -font-weight:570; - } + span{ -Color: #333; +font-size:12px; A } at -</style> -<script type= "Text/javascript" > - varflag=NewArray (false,false,false,false); - //determine the user name - functiontest1 () { inflag[0]=false; - varName = document.getElementById ("name"); to varspan1= document.getElementById ("Span1"); + if((name.value.length>=2 &&name.value.length<=4) && (/^[\u4e00-\u9fff]*$/. Test (Name.value))) { - //span1.style.display= "None"; theSpan1.style.color= "White"; *flag[0]=true; $}Else{Panax NotoginsengSpan1.style.color= "Red"; -flag[0]=false; the } + } A //determine the phone number the functiontest2 () { +flag[1]=false; - varTel = document.getElementById ("tel"); $ varspan2= document.getElementById ("Span2"); $ if(/^1 (3|5|7|9) \d{9}$/. Test (Tel.value)) { -Span2.style.color= "White"; -flag[1]=true; the}Else{ -Span2.style.color= "Red";Wuyiflag[1]=false; the } - } Wu //Determine the password - functiontest3 () { Aboutflag[2]=false; $ varPassword = document.getElementById ("Password"); - varspan3= document.getElementById ("Span3"); - if((password.value.length>=6) && (password.value.length<=20) -&& (/^[a-za-z][a-za-z0-9_]*$/. Test (Password.value))) { ASpan3.style.color= "White"; +flag[2]=true; the}Else{ -Span3.style.color= "Red"; $flag[2]=false; the } the } the //Confirm Password the functiontest4 () { -flag[3]=false; in varPassword = document.getElementById ("Password"); the varRepassword = document.getElementById ("Repassword"); the varspan4= document.getElementById ("Span4"); About if(((repassword.value!=NULL) && (repassword.value!= "")) && (repassword.value==password.value)) { theSpan4.style.color= "White"; theflag[3]=true; the}Else{ +Span4.style.color= "Red"; -flag[3]=false; the } Bayi } the //Login Judgment the functionReg () { - varCount=0; - for(vari=0;i<flag.length;i++){ the if(flag[i]==true){ thecount++; the if(count==flag.length) { the return true; - } the } the } the return false;94 } the the</script> the98<body id= "Body" > About<form action= "timer. html" method= "POST" style= "color: #0F0; Font-size:36px "onsubmit=" Return Reg () "> -<table id= "box" ><br/><br/><br/><br/><br/><br/>101<tr>102<td> User name:</td>103<td><input id= "name" type= "text" onblur= "test1 ()" style= "Border-color: #339"/>104<span id= "Span1" > must enter Chinese character name </span> the</td>106</tr>107<tr>108<td> Mobile Number:</td>109<td><input id= "Tel" type= "text" onblur= "test2 ()" style= "Border-color: #339"/> the<span id= "span2" > mobile phone number must meet the conditions </span>111</td> the</tr>113<tr> the<td> Enter Password:</td> the<td><input id= "password" type= "password" onblur= "Test3 ()" style= "Border-color: #339"/> the<span id= "span3" > English alphabet with letters, numbers and underscore letters, with a length of not less than 6</span>117</td>118</tr>119<tr> -<td> Confirm Password:</td>121<td><input id= "Repassword" type= "password" onblur= "test4 ()" style= "Border-color: #339"/>122<span id= "Span4" > two times password input must be consistent </span>123</td>124</tr> the<tr>126<td> Sex :</td>127<td><input type= "Radio" name= "Gender" checked= "checked"/> Male -<input type= "Radio" name= "gender"/> Female129</td> the</tr>131<tr> the<td> Studies Calendar:</td>133<td>134<select name= "Education" >Education135<option value= "Primary School" selected= "selected" > Primary school </option>136<option value= "Junior High School" > Junior High School </option>137<option value= "High School" > High School </option>138<option value= "University" > University </option>139</select> $ 141</td>142</tr>143<tr>144<td> Love Good:</td>145<td>146<input type= "checkbox" Name= "Love" checked= "checked"/> Internet147<input type= "checkbox" Name= "Love"/> Blue Ball148<input type= "checkbox" Name= "Love"/> Soccer149<input type= "checkbox" Name= "Love"/> Mountain climbing Max<input type= "checkbox" Name= "Love"/> Reading151</td> the</tr>153</table>154<input type= "Submit" value= "Submission"155Style= "FONT-SIZE:18PX; Color: #000; Background-color: #FC0; margin-left:550px; Border-color: #00F "/>156<input type= "reset" value= "reset"157Style= "FONT-SIZE:18PX; Color: #000; Background-color: #FC0; Margin-left:60px;border-color: #00F "/>158<br/><br/>159</form> the161 162</body>163Basic validation of JavaScript forms
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
