您的位置：首页 > Web前端 > JQuery

天易21----jquery实现简单的表单验证

2012-11-21 18:39 489 查看

一：图片预览：

1）默认打开示例：

2）输入不正确格式示例:

3)输入正确格式点击注册按钮示例：

二：代码示例：

1）tenjsp.js文件代码示例：

$(document).ready(function(){
//创建一个*
$(".a1").each(function(){
var hdv=$("<strong class='reda'>*</strong>")

$(this).parent().append(hdv);//为每一个class为a1属性的添加*号
});

//blur失去焦点开始
$("input").blur(function(){//失去焦点方法

$(this).parent().find(".a2").remove();//删除span标记，防止重复显示,只在这一步中有删除就可以
//用户名判断
if($(this).is("#username")){

if(this.value=="" || this.value.length<6){//注意双等于号
var hdv1=$("<span class='a2 error'>用户名不能小于6位！</span>");//注意这一步span class属性 当定义和下面的使用方法，css的样式定义
$(this).parent().append(hdv1);
}else{
var hdv1=$("<span class='a2 right'>输入正确！</span>");//注意这一步span class属性 当定义和下面的使用方法，css的样式定义
$(this).parent().append(hdv1);
}

}

//密码判断
if($(this).is("#password")){

if(this.value=="" || this.value.length<6){
var hdv1=$("<span class='a2 error'>为了保证您的账号安全，密码不能小于6位！</span>");
$(this).parent().append(hdv1);
}else{
var hdv1=$("<span class='a2 right'>输入正确！</span>");
$(this).parent().append(hdv1);
}

}

//确认密码判断
if($(this).is("#password1")){

if(this.value=="" || this.value!=$("#password").val()){//判断两次输入的密码是否一致
var hdv1=$("<span class='a2 error'>两次输入的密码不一致！</span>");
$(this).parent().append(hdv1);
}else{
var hdv1=$("<span class='a2 right'>输入正确！</span>");
$(this).parent().append(hdv1);
}

}

//E-mail判断
if($(this).is("#eamil")){
var em=/.+@.+\.[a-zA-Z]{2,4}$/;//这里注意声明的不是字符串，如果声明字符串不会对格式进行判断
if(this.value=="" || (!em.test(this.value))){//对邮箱地址进行判断
var hdv1=$("<span class='a2 error'>E-mail格式不正确！</span>");
$(this).parent().append(hdv1);
}else{
var hdv1=$("<span class='a2 right'>输入正确！</span>");
$(this).parent().append(hdv1);
}

}

//联系电话判断
if($(this).is("#tel")){
var tel=/^((\(\d{3}\))|(\d{3}\-))?1[35][0-9]\d{8}$|^189\d{8}$/;//这里注意声明的不是字符串，如果声明字符串不会对格式进行判断
//			  if(this.value=="" || isNaN($(this).val())){//isNaN($(this).val()判断是否是数字
if(this.value=="" || (!tel.test(this.value))){//对手机号码进行判断
var hdv1=$("<span class='a2 error'>联系方式不正确,请输入正确的手机号码！</span>");
$(this).parent().append(hdv1);
}else{
var hdv1=$("<span class='a2 right'>输入正确！</span>");
$(this).parent().append(hdv1);
}

}

});
//blur失去焦点结束

//点击提交按钮事件
$("#send").click(function(){

$("input").trigger("blur");//但点击注册按钮时，得到blur失焦状态，显示那些输入正确和错误，给予最后总的提示，如果默认只显示这一步的效果，必须后面加上return false;
var result=$(".error").length;//判断输入错误文本框的元素数，即个数
if(result){
return false;
}else{
alert("注册成功！");
}
});

//重置按钮事件
$("#res").click(function(){

$(".a2").remove();//当点击重置按钮时恢复默认报错信息效果

});

});

2）页面代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title></title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="<%=basePath %>js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="<%=basePath %>js/tenjsp.js"></script>
<style type="text/css">
*{padding:0;margin:0;}
body {padding:100px;font-size:12px;font-family:"宋体";}
.one{margin:10px 0;}
.one label{width:100px;float:left;text-align:right;height:20px;line-height:20px;}
.one input{border:1px solid #ccc;height:20px;}
.two{padding-left:100px;}
.reda{color:red;}
.a2{color:red;}
</style>
</head>

<body>
<form action="" method="post">
<div class="one">
<label for="username">用户名：</label>
<input type="text" id="username" class="a1"/>
</div>
<div class="one">
<label for="password">密码：</label>
<input type="password" id="password" class="a1"/>
</div>
<div class="one">
<label for="password1">确认密码：</label>
<input type="password" id="password1" class="a1">
</div>
<div class="one">
<label for="email">E-mail：</label>
<input type="text" id="eamil" 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="send" value="注册"/>
<input type="reset" id="res" value="重置"/>
</div>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航