jQuery 对表单的简单验证

最新推荐文章于 2020-01-12 17:20:35 发布

aimartt

最新推荐文章于 2020-01-12 17:20:35 发布

阅读量801

点赞数

分类专栏： jQuery 文章标签： jquery class function input html string

本文链接：https://blog.csdn.net/aimartt/article/details/7874358

版权

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

jQuery 对表单的简单验证

参考资料：
《锋利的jQuery》作者：单东林张晓菲魏然出版社: 人民邮电出版社

页面初始化后效果如图：

代码如下：

<%@ 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>
	  	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function() {
				//为必填项加上红色星号
				$(":input.required").each(function() {
					$(this).after("<span style='color: #ff0000'>*</strong>");
				});
				
				//输入框失去焦点事件
				$(":input").blur(function() {
					$(this).siblings(".msg").remove();	//清空以前的提示
					if ($(this).is("#username")) {	//当前元素为用户名输入框
						if ($(this).val() == "" || $(this).val().length < 6) {
							var msg = "用户名不得低于6位";
							$(this).next().after("<span class='msg error'>" + msg + "</span>");
						} else {
							var msg = "√";
							$(this).next().after("<span class='msg right'>" + msg + "</span>");
						}
					}
					if ($(this).is("#email")) {		//当前元素为邮箱输入框
						var regex = /^[a-zA-Z0-9]([a-zA-Z0-9]*[-_.]?[a-zA-Z0-9]+)+@([\w-]+\.)+[a-zA-Z]{2,}$/;
						if ($(this).val() == "" || !regex.test($(this).val())) {
							var msg = "E-Mail地址有误";
							$(this).next().after("<span class='msg error'>" + msg + "</span>");
						} else {
							var msg = "√";
							$(this).next().after("<span class='msg right'>" + msg + "</span>");
						}
					}
				}).bind("focus keyup", function() {
					//键入和获取焦点时触发 blur 事件，并阻止浏览器默认动作
					$(this).triggerHandler("blur");
				});
				
				//提交按钮 click 事件
				$("#send").click(function() {
					$(":input.required").trigger("blur");	//触发输入控件的 blur 事件
					if ($(".error").length > 0) {	
						return false;		//有错误信息时，阻止表单提交
					} else {
						alert("表单成功提交");
					}
				});
			});	
		</script>  	
		
		<!-- CSS -->
		<style type="text/css">
			.alignLeft {text-align: left;}
			.alignRight {text-align: right;}
			.error {color: #ff0000;}
			.right {color: #00ff00;}
		</style>
  	</head>
  
  	<!-- HTML -->
  	<body>
  		<form action="reg.jsp" method="post">
  			<table>
  				<tr>
  					<td class="alignRight"><label for="username">用户名：</label></td>
	  				<td class="alignLeft"><input type="text" id="username" class="required" /></td>
	  			</tr>
	  			<tr>
	  				<td class="alignRight"><label for="email">邮箱：</label></td>
	  				<td class="alignLeft"><input type="text" id="email" class="required" /></td>
	  			</tr>
	  			<tr>
	  				<td class="alignRight"><label for="personInfo">个人资料：</label></td>
	  				<td class="alignLeft"><input type="text" id="personInfo" /></td>
	  			</tr>
	  			<tr>
	  				<td></td>
	  				<td>
		  				<input type="submit" id="send" value="提交" />
		  				<input type="reset" id="reset" />
	  				</td>
	  			</tr>
  			</table>
  		</form>
  	</body>
</html>

aimartt

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery 对表单的简单验证

jQuery 对表单的简单验证参考资料：《锋利的jQuery》作者：单东林张晓菲魏然出版社: 人民邮电出版社页面初始化后效果如图：代码如下：<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServe
复制链接

扫一扫

专栏目录