<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "Author" content= "http://www.51texiao.cn/"/>
<title> Ant Tribe </title>
<style type= "Text/css" >
Body {
font-size:11px
}
#divLogin {
margin:15% 0 0 15%
}
#divLogin fieldset {
width:300px;
padding:0px;
margin:0px
}
#divLogin fieldset h3 {
margin:0px;
padding:5px;
Background-color: #eee
}
#divLogin fieldset. Content {
padding:20px;
Line-height:2.6em
}
#divLogin fieldset. Content. btncenter {
Text-align:center
}
txt
border: #666 1px solid;
padding:2px;
width:180px;
margin-right:3px
}
. btn {
border: #666 1px solid;
padding:2px;
width:60px;
Filter:progid:DXImageTransform.Microsoft.Gradient (gradienttype=0, startcolorstr= #ffffff, endcolorstr= #ECE9D8)
}
</style>
<script type= "Text/javascript" src= "Mytest/jquery/jquery-1.8.3.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#Button1"). Click (function () {//button click event
var $name = $ ("#txtName"); User name
var $pass = $ ("#txtPass"); Password
if ($name. val () = = "")
{
Alert ("User name cannot be empty!");
$name. focus ();
return false;
}
Else
{
Alert ("Password cannot be empty!");
$pass. focus ();
return false;
}
})
})
</script>
<body>
<div id= "Divlogin" >
<fieldset>
<div class= "Content" >
<div> Users:
<input id= "txtname" type= "text" class= "txt"/>
</div>
<div> Password:
<input id= "Txtpass" type= "password" class= "txt"/>
</div>
<div class= "Btncenter" >
<input id= "Button1" type= "button" value= "Login" class= "btn"/>
<input id= "Reset1" type= "reset" value= "Cancel" class= "Btn"/>
</div>
</div>
</fieldset>
</div>
</body>
The above code implements the basic form verification function,
How to use jquery for simple form validation
