jQuery表单验证实例 / 包含用户名、密码、住址、邮箱验证
如下图
别忘了引入jQuery框架!!!
话不多说直接先上jQuery部分代码:
< script type= "text/javascript" >
$( document) . ready ( function ( ) {
var tip1 = "<span class='span1'>用户名不能为空!</span>" ;
var tip2 = "<span class='span2'>邮箱格式错误或不能为空!</span>" ;
var tip3 = "<span class='span3'>地址不能为空!</span>" ;
var tip4 = "<span class='span4'>密码长度不能小于五位且最多为十位 !</span>" ;
var condition = / ^ ( [ \. a- zA- Z0- 9_ - ] ) + @( [ a- zA- Z0- 9_ - ] ) + ( \. [ a- zA- Z0- 9_ - ] ) + / ;
$( ".id" ) . blur ( function ( ) {
if ( ! $( ".id" ) . val ( ) ) {
$( ".span1" ) . remove ( ) ;
$( ".id" ) . after ( tip1) ;
}
else {
$( ".span1" ) . remove ( ) ;
}
} ) ;
$( ".email" ) . blur ( function ( ) {
if ( ! condition. test ( $( ".email" ) . val ( ) ) ) {
$( ".span2" ) . remove ( ) ;
$( ".email" ) . after ( tip2) ;
}
else {
$( ".span2" ) . remove ( ) ;
}
} ) ;
$( ".adress" ) . blur ( function ( ) {
if ( ! $( ".adress" ) . val ( ) ) {
$( ".span3" ) . remove ( ) ;
$( ".adress" ) . after ( tip3) ;
}
else {
$( ".span3" ) . remove ( ) ;
}
} ) ;
$( ".pwd" ) . blur ( function ( ) {
if ( $( ".pwd" ) . val ( ) . length < 5 || $( ".pwd" ) . val ( ) . length > 10 ) {
$( ".span4" ) . remove ( ) ;
$( ".pwd" ) . after ( tip4) ;
}
else {
$( ".span4" ) . remove ( ) ;
}
} ) ;
$( ".button" ) . click ( function ( ) {
if ( ! $( ".id" ) . val ( ) || ! condition. test ( $( ".email" ) . val ( ) ) || ! $( ".adress" ) . val ( ) || $( ".pwd" ) . val ( ) . length < 5 || $( ".pwd" ) . val ( ) . length > 10 ) {
alert ( "注册信息有误,请更改个人信息" ) ;
}
else {
alert ( "注册成功" ) ;
}
} )
} )
< / script>
结构和样式:
< div class = " main_box" >
< div class = " title" >
欢迎注册原魔
</ div>
< div class = " box" >
< img alt = " 插图" src = " ./img/可莉派萌.png" class = " img" >
< form>
用户名:< input class = " id" type = " text" > < br>
邮  箱:< input class = " email" type = " text" > < br>
地  址:< input class = " adress" type = " text" > < br>
密  码:< input class = " pwd" type = " password" > < br>
< button type = " button" class = " button" > 注      册</ button>
</ form>
</ div>
</ div>
span {
color : white;
}
body {
font-family : sans-serif;
}
.main_box {
width : 100%;
height : 910px;
background-color : red;
background-image : linear-gradient ( #e66465, #000000) ;
}
.title {
font-size : 5em;
color : white;
width : 100%;
height : 100px;
text-align : center;
}
.box {
width : 1050px;
height : 310px;
margin : 150px auto 50px auto;
padding-left : 360px;
}
input {
height : 40px;
width : 200px;
border-radius : 20px;
border : solid 1px #B5B5B5;
margin : 10px;
font-size : 1.2em;
}
form {
color : white;
font-size : 1.2em;
float : left;
margin-left : 50px;
}
.button {
width : 280px;
height : 40px;
background-color : #9781FD;
border-radius : 25px;
color : white;
font-size : 1.3em;
font-weight : 700;
margin-top : 10px;
}
.img {
width : 310px;
height : 310px;
float : left;
}