·设为首页 ·加入收藏 ·简体中文 ·繁体中文 沧州市2015年中考成绩查询
当前位置:pt虎牌娱乐 > 网页配色 >

jQuery表单验证实例介绍

文章来源:转载    点击数:    更新时间:2016-02-22

本文章介绍的这个表单验证是一个原生态的jquery表单验证写法并不是使用了jquery插件来操作,这里是一个完整的实例,希望对大家有帮助。


===css部分===============================

 代码如下 复制代码

<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>
 
<head>
<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 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'>用户名不得小于6位</span>");
    $(this).parent().append(bdv1);
}else{
var bdv1=$("<span class='a2'>正确</span>");
    $(this).parent().append(bdv1);
}
}
 
if($(this).is("#parsword")){
if(this.value==''||this.value.length<3){
var bdv1=$("<span class='a2'>密码不得为空</span>");
    $(this).parent().append(bdv1);
}else{
var bdv1=$("<span class='a2'>正确</span>");
    $(this).parent().append(bdv1);
}
}
if($(this).is("#parswords")){
if(this.value==''||this.value!=$('#parsword').val()){
var bdv1=$("<span class='a2'>两次密码不一样</span>");
    $(this).parent().append(bdv1);
}else{
var bdv1=$("<span class='a2'>正确</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'>邮件的格式不正确</span>");
    $(this).parent().append(bdv1);
}else{
var bdv1=$("<span class='a2'>正确</span>");
    $(this).parent().append(bdv1);
}
}
if($(this).is("#tel")){
if(this.value==''||isNaN($(this).val())||this.value.length<11){
var bdv1=$("<span class='a2'>手机号不得为空,必须是11位数字</span>");
    $(this).parent().append(bdv1);
}else{
var bdv1=$("<span class='a2'>正确</span>");
    $(this).parent().append(bdv1);
}
}
 
});
$("#zend").click(function(){
$(":input").trigger("blur");
})
});
</SCRIPT>
</head>

=====内容部分====================================
<body>
<form action="" method="post">
<div class="one">
<label for="userrname">用户名:</label>
<input type="text" id="username" class="a1" />
</div>
<div class="one">
<label for="parsword">密码:</label>
<input type="text" id="parsword" class="a1" />
</div>
<div class="one">
<label for="parswords">确认密码:</label>
<input type="text" id="parswords" class="a1" />
</div>
<div class="one">
<label for="email">邮件:</label>
<input type="text" id="email" class="a1" />
</div>
<div class="one">
<label for="tel">手机:</label>
<input type="text" id="tel" class="a1" />
</div>
<div class="two">
<input type="submit" id="zend" value="提交">
<input type="reset" id="res" value="重置">
</div>
</form>
</body>

教育新闻
信息公开
设为首页 | 加入收藏 | 简体中文 | 繁体中文 | 网站地图