一：图片预览：
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>