===css Part ===============================
| The code is as follows |
Copy Code |
| <style type= "Text/css" >
*{
padding:0;
margin:0;}
body{
font-size:12px; padding:100px;}
. one{
margin:10px 0;}
. One label{
width:100px;
Float:left;
Text-align:right;
height:20px;
}
. One input{
border:1px solid #CCC;
height:20px;}
. a2{
Background-color: #CCC;}
strong{
color:red;}
</style>
<title>web</title>
<meta http-equiv= "Content-type" content= "text/html;charset=gb2312" >
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" ></script> ===== Script Part ============================================
<script language= "JavaScript" type= "Text/javascript" >
$ (document). Ready (function () {
$ (". A1"). each (function () {
var bdv=$ ("<strong>*</strong>");
$ (this). Parent (). append (BDV);
});
$ (": Input"). blur (function () {
$ (this). Parent (). Find (". A2"). Remove ();
if ($ (this). Is ("#username")) {
if (this.value== ' | | THIS.VALUE.LENGTH<6) {
var bdv1=$ ("<span class= ' A2 ' > username shall not be less than 6 bits </span>");
$ (this). Parent (). append (BDV1);
}else{
var bdv1=$ ("<span class= ' A2 ' > Correct </span>");
$ (this). Parent (). append (BDV1);
}
}
if ($ (this). Is ("#parsword")) {
if (this.value== ' | | THIS.VALUE.LENGTH<3) {
var bdv1=$ ("<span class= ' A2 ' > password must not be null </span>");
$ (this). Parent (). append (BDV1);
}else{
var bdv1=$ ("<span class= ' A2 ' > Correct </span>");
$ (this). Parent (). append (BDV1);
}
}
if ($ (this). Is ("#parswords")) {
if (this.value== ' | | this.value!=$ (' #parsword '). Val ()) {
var bdv1=$ ("<span class= ' A2 ' > two times password is not the same </span>");
$ (this). Parent (). append (BDV1);
}else{
var bdv1=$ ("<span class= ' A2 ' > Correct </span>");
$ (this). Parent (). append (BDV1);
}
}
if ($ (this). Is ("#email")) {
if (this.value== ' | | (this. value!= "" &&!/.*@.+. [A-za-z] {2,4}$/.test (This.value))) {
var bdv1=$ ("<span class= ' A2 ' > message is incorrectly formatted </span>");
$ (this). Parent (). append (BDV1);
}else{
var bdv1=$ ("<span class= ' A2 ' > Correct </span>");
$ (this). Parent (). append (BDV1);
}
}
if ($ (this). Is ("#tel")) {
if (this.value== ' | | isNaN ($ (this). val ()) | | THIS.VALUE.LENGTH<11) {
var bdv1=$ ("<span class= ' A2 ' > Mobile number must be 11 digits </span>");
$ (this). Parent (). append (BDV1);
}else{
var bdv1=$ ("<span class= ' A2 ' > Correct </span>");
$ (this). Parent (). append (BDV1);
}
}
});
$ ("#zend"). Click (function () {
$ (": Input"). Trigger ("blur");
})
});
</SCRIPT>
===== Content Section ====================================
<body>
<form action= "" method= "POST" >
<div class= "One" >
<label for= "Userrname" > Username:</label>
<input type= "text" id= "username" class= "A1"/>
</div>
<div class= "One" >
<label for= "Parsword" > Password:</label>
<input type= "text" id= "Parsword" class= "A1"/>
</div>
<div class= "One" >
<label for= "parswords" > Confirm password:</label>
<input type= "text" id= "Parswords" class= "A1"/>
</div>
<div class= "One" >
<label for= "Email" > Email:</label>
<input type= "text" id= "email" class= "A1"/>
</div>
<div class= "One" >
<label for= "Tel" > Mobile:</label>
<input type= "Text" id= "tel" class= "A1"/>
</div>
<div class= "Two" >
<input type= "Submit" id= "Zend" value= "submitted" >
<input type= "Reset" id= "res" value= "reset" >
</div>
</form>
</body> |
