天易21----jquery实现简单的表单验证
一：图片预览：
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();//当点击重置按钮时恢复默认报错信息效果});});<%@ 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>