Home > Developer > JavaScript
Form form Validation:
JS Basic test Content, form form verification, regular expression, blur event, auto get array, CSS layout style, dynamic erase, etc. The complete code is as follows:
|
<metahttp-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>form-lpb</title>
<style>
Body {
Background: #CCF;
font-size:12px;
}
. box {
margin:20px 50px;
line-height:25px;
}
. box. Box_sel {
margin-left:25px;
}
. text {
Text-align:right;
}
span {
Color: #900;
}
. length {
width:38px;
}
</style>
<body>
<divclass= "box" >
<!--form Star-->
<formaction= "submit.html" onsubmit= "return Checkall ()" >
<table>
<tr>
<tdclass= "text" > Account </td>
<td><inputtype= "text" id= "UserName" onblur= "B_username ()"/></td>
<td><spanid= "Span_username" ></span></td>
</tr>
<tr>
<tdclass= "text" > Password </td>
<td><inputtype= "Password" id= "pass" onblur= "B_pass ()"/></td>
<td> <spanid= "Span_pass" ></span></td>
</tr>
<tr>
<tdclass= "text" > Duplicate password </td>
<td><inputtype= "Password" id= "Pass1" onblur= "B_pass1 ()"/></td>
<td> <spanid= "Span_pass1" ></span></td>
</tr>
<tr>
<tdclass= "text" > Mobile number </td>
<td><inputtype= "Text" id= "tel" onblur= "B_tel ()"/></td>
<td> <spanid= "Span_tel" ></span></td>
</tr>
<tr>
<tdclass= "text" > ID number </td>
<td><inputtype= "text" id= "Idcard" onblur= "B_idcard ()"/></td>
<td><spanid= "Span_idcard" ></span></td>
</tr>
<tr>
<tdclass= "text" > Birth date </td>
<td>
<inputtype= "text" id= "year" class= "Length" disabled= "disabled"/>
<inputtype= "text" id= "month" class= "Length" disabled= "disabled"/>
<inputtype= "text" id= "Day" class= "Length" disabled= "disabled"/>
</td>
</tr>
<tr>
<tdclass= "text" > Mailbox </td>
<td><inputtype= "text" id= "email" onblur= "b_email ()"/></td>
<td><spanid= "Span_email" ></span></td>
</tr>
</table>
<divclass= "Box_sel" >
Hobby
<select>
<option> Basketball </option>
<option> Football </option>
<option> Volleyball </option>
</select>
Area
<select>
<option> Henan </option>
<option> Hunan </option>
<option> Hebei </option>
</select>
<br/>
<inputtype= "checkbox" id= "Ch_box" onclick= "C_box ()"/>
Whether to agree
<ahref= "xieyi.html" target= "_blank" > Company Agreement </a>
<br/>
<inputtype= "Submit" id= "sub" value= "registered" disabled= "disabled"/>
<inputtype= "Reset" id= "rst" value= "re-fill" onclick= "Sub_return ()"/>
</div>
</form>
<!--end form-->
</div>
<script>
User Famous School inspection
function B_username () {
var reg =/^[a-za-z]{3,9}[_]*[0-9]{3,9}$/; User name-Regular expression
var c_use = document.getElementById ("UserName"). Value;
var c_span_use = document.getElementById ("Span_username");
if (Reg.test (C_use)) {
C_span_use.innerhtml= "√";
return true;
}else {
C_span_use.innerhtml= "username must start with 3-9 letters, can be underlined _, followed by 3-9 digits";
}
}
Password checksum
function B_pass () {
var reg =/^[a-za-z]{3,6}[_]*[0-9]{3,9}$/; Password-Regular expression
var c_pass = document.getElementById ("Pass"). Value;
var c_span_pass =document.getelementbyid ("Span_pass");
if (Reg.test (C_pass)) {
C_span_pass.innerhtml= "√";
return true;
}
else {
c_span_pass.innerhtml= "Password must begin with 3-6 English letters, followed by 3-9 digits";
return false;
}
}
Duplicate password checksum,
function B_pass1 () {
var cm = document.getElementById ("Pass1"). Value;
var cm_sp = document.getElementById ("Span_pass1");
var c_pass = document.getElementById ("Pass"). Value;
if (cm==c_pass&&cm!= "") {
Cm_sp.innerhtml= "√";
return true;
}else{
Cm_sp.innerhtml= "Please repeat the password";
return false;
}
}
Cell phone number Check
function B_tel () {
var reg =/^ (\+86)? [1] [3,5,8] [0-9] {9}$/;
var C_tel = document.getElementById ("tel"). Value;
var C_span_tel = document.getElementById ("Span_tel");
if (Reg.test (C_tel)) {
C_span_tel.innerhtml= "√";
return true;
}else {
C_span_tel.innerhtml= "mobile phone number can (+86) the first is 1, the second is" 3,5,8 ", a total of 11 digits";
return false;
}
}
Verification of ID card number
function B_idcard () {
var reg =/\d{17}\w{1}|\d{15}/;
var c_idcard = document.getElementById ("Idcard"). Value;
var c_span_idcard = document.getElementById ("Span_idcard");
if (Reg.test (C_idcard)) {
C_span_idcard.innerhtml= "√";
document.getElementById ("Year"). Value=c_idcard.substr (6,4);
document.getElementById ("month"). VALUE=C_IDCARD.SUBSTR (10,2)//automatically get month
document.getElementById ("Day"). Value=c_idcard.substr (12,2);
return true;
}else{
C_span_idcard.innerhtml= "ID card format error, must be 18 digits or 15 digits";
document.getElementById ("Year"). value= "";
document.getElementById ("month"). Value= ""/Automatically get month
document.getElementById ("Day"). value= "";
return false;
}
}
Mailbox Check
function B_email () {
var reg =/\w+@\w+\.\w+/;
var c_email = document.getElementById ("email"). Value;
var c_span_email = document.getElementById ("Span_email");
if (Reg.test (C_email)) {
C_span_email.innerhtml= "√";
return true;
}else {
C_span_email.innerhtml= "Mailbox format error, must contain @ and. ";
return false;
}
}
Protocol Checksum
function C_box () {
var c_b = document.getElementById ("Ch_box");
var c_sub = document.getElementById ("sub");
if (c_b.checked) {
C_sub.disabled=false;
}else{
C_sub.disabled=true;
}
}
Sub_return the Submit button reverts to an unavailable state when you click Re-fill
function Sub_return () {
var subt = document.getElementById ("sub");
Subt.disabled=true;
var Span_clean = document.getElementsByTagName ("span");
for (Var i=0;i<=span_clean.length;i++) {
var span1 = span_clean[i];
Span1.innerhtml= "";
}
}
Overall check
function Checkall () {
var C1 =b_username ();
var c2 =b_pass ();
var c3 =b_tel ();
var c4 =b_idcard ();
var c5 =b_email ();
if (C1&&C2&&C3&&C4&&C5) {
return true;
}else{
return false;
}
}
</script>
</body>
|
The effect is shown in the following illustration:
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
