时间插件，validate验证的简单jsp例子

最新推荐文章于 2020-09-29 09:25:24 发布
最新推荐文章于 2020-09-29 09:25:24 发布
阅读量213 收藏
点赞数
文章标签： java javascript json ViewUI
原文链接：http://www.cnblogs.com/lcuzhanglei/archive/2012/07/27/2611304.html
版权 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	Date date = new Date();
	request.setAttribute("date", date);
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<script
		src="<%=path%>/js/My97DatePicker/WdatePicker.js"
		type="text/javascript"></script>
	<link rel="stylesheet" type="text/css"
		href="<%=path%>/css/validation.css"/>
	<link rel="stylesheet" type="text/css"
		href="<%=path%>/css/emailAutoComplete.css"/>
	<link rel="stylesheet" type="text/css"
		href="<%=path%>/css/common.css"/>
	<link rel="stylesheet" type="text/css"	
		href="<%=path%>/css/email/mail.css"/>
	<script src="<%=path%>/js/main.js" type="text/javascript"></script>
	<script type="text/javascript" src="<%=path%>/js/jquery-1.7.1.js"></script>
	<script type="text/javascript" src="<%=path%>/js/jquery.validate.js"></script>
	<script type="text/javascript" src="<%=path%>/js/jquery.mailAutoComplete-3.1.js"></script>
	<script type="text/javascript" src="<%=path%>/js/jquery.form.js"></script>
	<style type="text/css">
		.blank{
			border: 1px solid #DB9238;
		    font-size: 14px;
		    height: 24px;
		    margin: 0 5px;
		    padding: 2px;
		    width: 196px;
		}
	</style>
<script type="text/javascript">
		$().ready(function() {
			jQuery.validator.addMethod("isMobile", function(value, element) {       
			     var length = value.length;   
			     var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|14[0-9]{1}|18[0-9]{1})+\d{8})$/;   
			     return this.optional(element) || (length == 11 && mobile.test(value));       
			}, "请正确填写您的手机号码");
			jQuery.validator.addMethod("isEmail",function(value,element){
				var email = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
				return this.optional(element) || (email.test(value));
			},"请输入正确的email");
			$("#insertContact").validate({
				errorPlacement:function(error,element){
					error.appendTo(element.parent());
				},
				errorClass:"haha",
				success:function(label){
					label.addClass("valid").text(" ");
				},
				rules:{
					contactLoginName:{
						required: true,
						remote:{
							url:"<%=path%>/contact/validateContactUserId.do",
							type:"post",
							datatype:"json",
							data:{
								contactLoginName:function(){
									return $("#contactLoginName").val();
								}
							}
						}
					},
					gender:{
						required:true
					},
					contactName:{
						required:true,
					},
					mobilePhone:{
						digits:true,
						isMobile:true
					},
					personalEmail:{
						isEmail:true,
						accept:".com|.com.cn|.cn|.net|.edu"
					},
					officeEmail:{
						isEmail:true,
						accept:".com|.com.cn|.cn|.net|.edu"
					}
				},
				messages:{
					contactLoginName:{
						required:"不能为空",
						remote:"没有此用户"
					},
					gender:{
						required:"不能为空"
					},
					contactName:{
						required:"不能为空"
					},
					mobilePhone:{
						digits:"格式不对",
						isMobile:"格式不对"
					},
					personalEmail:{
						isEmail:"不合法",
						accept:"后缀名错误"
					},
					officeEmail:{
						isEmail:"不合法",
						accept:"后缀名错误"
					}
				}
			});
		});
		$(document).ready(function(){
			$("#otherInfo").toggle(function(){
				$("#children").show();			//将子节点的div元素显示出来并重新定位到上次操作的元素
			},function(){
				$("#children").hide();			//将子节点的div元素显示出来并重新定位到上次操作的元素
			});
		});
	</script>
<title>新建联系人</title>
</head>

<body style="padding: 0;margin: 0;">
	<div id="userRegForm" style="width: 600px;">
		<form action="../contact/insertContact.do" method="post"
			name="insertContact"id="insertContact">

			<div style=" margin-bottom:30px;">
			<div style="float:right;">
					<input type="button"class="confirm" value="返回" οnclick="window.location.href='<%=request.getContextPath() %>/contact/beforeContactHome.do'"/>
				</div>
				<h3 style="font-family: Arial,Helvetica,sans-serif;">联系人信息</h3>
				<hr>
			</div>

			<div class="lay">
				<div class="c2">姓名:</div>
				<div class="c3">
					<input type="text"class="blank" id="contactName" name="contactName">*
				</div>
			</div>
			<div class="lay">
				<div class="c2">性别:</div>
				<div id="" class="c3">
					<select name="gender">
						<option value="0">男</option>
						<option value="1">女</option>
					</select>
				</div>
			</div>
			<div class="lay">
				<div class="c2">联系人登录名:</div>
				<div class="c3">
					<input type="text" id="contactLoginName"class="blank" name="contactLoginName">*
					<input type="hidden" id = "contactUserId" name="contactUserId" value="${userId}"/>
				</div>
			</div>

			<div class="lay">
				<div class="c2">所属组:</div>
				<div class="c3">
					<select name="groupName">
						<option></option>
						<c:forEach items="${groupList }" var="group">
						<option value="${group.groupId}">${group.groupName}</option>
						</c:forEach>
					</select>
				</div>
			</div>
			<div id="menu">
			<span id="otherInfo" style="font-size:14px;cursor:pointer;font-weight:bold;">其他信息</span>
			<hr/>
			<div class="children" id="children" style="display: none;">
				<div class="lay">
					<div class="c2">私人邮箱:</div>
					<div class="c3">
						<input type="text" id="personalEmail" class="blank"name="personalEmail">
					</div>
				</div>
				<div class="lay">
					<div class="c2">单位名称:</div>
					<div class="c3">
						<input type="text" id="unitName" class="blank"name="unitName">
					</div>
				</div>
				<div class="lay">
					<div class="c2">办公邮箱:</div>
					<div class="c3">
						<input type="text" id="officeEmail" class="blank"name="officeEmail">
					</div>
				</div>
				<div id="c3" class="lay">
					<div class="c2">移动电话:</div>
					<div class="c3">
						<input type="text" id="mobilePhone" class="blank"name="mobilePhone">
					</div>
				</div>
				<div id="c3" class="lay">
					<div class="c2">办公电话:</div>
					<div class="c3">
						<input type="text" id="officePhone" class="blank"name="officePhone">
					</div>
				</div>
				<div class="lay">
					<div class="c2">办公传真:</div>
					<div class="c3">
						<input type="text" id="officeFax" class="blank"name="officeFax">
					</div>
				</div>
				<div class="lay">
					<div class="c2">家庭电话:</div>
					<div class="c3">
						<input type="text" id="familyPhone" class="blank"name="familyPhone">
					</div>
				</div>
				<div class="lay">
					<div class="c2">办公地址:</div>
					<div class="c3">
						<input type="text" id="officeAdress" class="blank"name="officeAdress">
					</div>
				</div>
				<div class="lay">
					<div class="c2">办公地址邮编:</div>
					<div class="c3">
						<input type="text" id="officeZip" class="blank"name="officeZip">
					</div>
				</div>
				<div id="c3" class="lay">
					<div class="c2">家庭住址:</div>
					<div class="c3">
						<input type="text" id="familyAdress" class="blank"name="familyAdress">
					</div>
				</div>
				<div id="c3" class="lay">
					<div class="c2">家庭住址邮编:</div>
					<div class="c3">
						<input type="text" id="familyZip"class="blank" name="familyZip">
					</div>
				</div>
				<div id="c3" class="lay">
					<div class="c2">个人网址:</div>
					<div class="c3">
						<input type="text" id="personalWebsite"class="blank" name="personalWebsite">
					</div>
				</div>
				<input type="hidden" id="inputDate" name="inputDate" value="${date}">
				<div class="lay">
					<div id="" class="c2">生日:</div>
					<div id="" class="c3">
						<input id="birthday1" name="birthday1" class="blank"
							onFocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})" />
						<img src="../My97DatePicker/skin/datePicker.gif" width="16"
							height="22">
					</div>
				</div>
				<div class="lay">
					<div id="" class="c2">备注:</div>
					<div id="" class="c3">
						<textarea name="remark" id="remark" rows="5" cols="50"
							style="overflow:scroll;border: 1px solid #DB9238;"></textarea>
					</div>
				</div>
	
				<div class="c4">
					<p style="font-color:#d3d3d3;">(最多200个汉字或者200个英文字母)</p>
				</div>
			</div>
			</div>
				<div class="lay">
					<div id="" class="c2">
						<input type="submit"class="confirm" value="确认" />
					</div>
				</div>
		</form>
	</div>
</body>
</html>


后台的验证代码：
/**
	 * 验证所填写的用户名是否存在
	 * @param request
	 * @param response
	 */
	@RequestMapping("validateContactUserId")
	public void validateContactUserId(HttpServletRequest request,
			HttpServletResponse response){
		String contactLoginName = (String) request.getParameter("contactLoginName");
		response.setContentType("text/html;charset=utf-8");
		try {
			PrintWriter out = response.getWriter();
			User user = contactService.selectContactByLoginName(contactLoginName);
			if (user == null) {
				out.print("false");
			} else {
				HttpSession session = request.getSession();
				session.setAttribute("userId", user.getUserId());
				out.print("true");
			}
		} catch (IOException e) {
			e.printStackTrace();
		}
		
	}
	/**
	 * 验证分组名字是否已经存在
	 */
	@RequestMapping("validateGroupName")
	public void validateGroupName(HttpServletRequest request,
			HttpServletResponse response){
		String groupName = (String) request.getParameter("groupName");
		response.setContentType("text/html;charset=utf-8");
		try {
			PrintWriter out = response.getWriter();
			ContactGroup group = contactGroupService.selectGroupByName(groupName);
			if (group == null) {
				out.print("true");
			} else {
				out.print("false");
			}
		} catch (IOException e) {
			e.printStackTrace();
		}
		
	}

　　

转载于:https://www.cnblogs.com/lcuzhanglei/archive/2012/07/27/2611304.html

yuxiaoyu.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
validate.jsp
10-05
通用的验证码，可在页面中使用img标签src属性嵌套。可以直接放置页面中使用，简单方便
JSP的前台验证方式
weixin_30500473的博客
11-22 121
JSP的前台验证方式 要为学校的网站开发做一个统一的开发框架，目前只是使用Struts2和iBATIS搭起了大概的框架，有很多细节还没有考虑，也有很多地方需要优化。首先从前后台验证方面入手。 本文所说的前后台验证，不是按照验证发生的位置来区分的，而是按照验证过程是否与后台数据交互来区分的。比如，对于用于输入的内容，进行非空、长度、正则等验证，...
JSP页面输入框验证
yegshun的博客
09-30 7453
 1.将验证都写在一个JS文件中。 /* * jQuery JavaScript Library * * Copyright (c) 2009 Wu shaoxi * * * Date: 2014-10-31 * Function: validate input */ ///*验证数字的正则表达式集（转载） //验证数字：^[0-9]*$ //验证
JSP页面中的Form表单自动校验（使用validate插件）
baifenbaizhenxin的专栏
03-17 6598
一、问题描述    在jsp页面填写表单时（尤其是在用户注册时），需要对用户输入的内容进行实时校验，防止用户填错。如果通过&lt;input&gt;标签失去焦点再调用相关方法进行校验比较繁琐。二、原因分析    使用&lt;input&gt;失去焦点再调用相关方法比较繁琐，不适用。三、解决措施（使用validate插件进行校验）    1、引入validate插件。该插件是在jQuery插件的基础...
jsp登录验证
qq_44769557的博客
09-29 4321
登录验证 题目描述： 编写jsp页面login.jsp、validate.jsp和success.jsp，在login.jsp页面中输入用户名和密码信息，提交给validate.jsp页面进行用户验证，如果验证为合法用户（用户名为tom，密码为jenny），这转到（forward动作标记）success.jsp页面，否则转到login.jsp页面 **login.jsp** <%@ page language="java" contentType="text/html; charset=UTF-8"
JQuery validate插件验证用户注册信息
01-19
使用JQuery的validate插件做客户端验证非常方便，下面做一个使用validate插件验证用户注册信息的例子。 本实例使用的是1.5版本。 示例是在SSH下做的，代码如下： registe.jsp <%@ page language=java ...
JQuery表单验证控件结合struts1的例子
05-05
总结起来，这个例子展示了如何利用JQuery validate插件增强Struts1表单验证的用户体验。客户端验证可以即时反馈错误，减少不必要的服务器请求，而服务器端验证则作为最后一道防线，保证数据的正确性。在实际开发中，...
struts验证例子
07-28
2. **定义验证规则**：在Struts1中，这通常是通过struts-config.xml文件中的元素的validate属性来完成的，其中引用了一个Java类，这个类包含了具体的验证方法。在Struts2中，可以在struts.xml或相应的action配置中...
jquery validate配合struts2简单整改
04-08
在这个例子中，如果前端提交的数据未通过Struts2的后端验证，ActionSupport的validate()方法会被调用，并将错误信息添加到ActionContext中，然后在JSP页面上显示。 为了将前后端验证结果进行有效传递，我们需要在...
validate.js
symgdwyh的专栏
01-25 820
<br />function getElementByName(name){<br /> var elements = document.getElementsByName(name);<br /> return elements[0];<br />}<br />function validate(){<br /> var element = getElementByName("userName");<br /> if(element.value.length == 0){<br />  alert("Pl
一段验证日期的有效性的JAVA代码
01-07
一段简单的验证某日期是否有效存在的JAVA代码
ValidateForm:使用 jspservlet 进行简单的表单验证
06-07
验证表单 使用 jsp/servlet 进行简单的表单验证 近期课堂作业 使用文本文件验证表单上的条目 如果任何条目无效，则返回表单 在表单上显示错误消息
ValidateCode.jsp 生成验证码
yjw916622874的专栏
09-25 1230
import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*"%> response.setHeader("Pragma","No-cache"); response.setHeader("Cache-Control","no-cache"); response.setDateHeader("Expires", 0);
jsp中表单验证插件(Validform)资料
Try_go的博客
04-05 547
jsp中表单验证插件（Validform）的资料http://validform.rjboy.cn/document.html
javaweb验证码实现（jsp）
秦怀杂货店
12-29 2826
首先放上javaweb的目录结构： 生成验证码的jsp文件【validate.jsp】 <%@ page language="java" import ="java.awt.*" import ="java.awt.image.BufferedImage" import ="java.util.*" import ="javax.imageio.ImageIO"
简单的动态获取验证码（jsp）
qq_725話的博客
04-13 1079
1.用jsp编写获取验证码的代码，存入session，命名validate.jsp。 <%@ page import="java.awt.image.BufferedImage" %> <%@ page import="java.awt.*" %> <%@ page import="java.util.Random" %> <%@ page import=...
validate.js 表单验证类
pei_zhengxi的专栏
08-11 615
[code="java"]/**------------------------validate.js------------------------ ※【功能】表单验证类   ------------------------函数说明------------------------ chk.reg:正则表达式; chk.config:待验证项目信息,对应项目说明： id:待验证项目的id.(类型:字符串,必填) tip:待验证项目的提示标题.(类型:字符串,必填) arr:待验证的项目，对应的内容分别是:(
jsp中javascript验证日期格式
guozhangliang4016的专栏
03-25 1988
   RegTest    function dateCheck(str){      var re = new RegExp("^([0-9]{1,2})[.-]{1}([0-9]{1,2})[.-]{1}([0-9]{4})$");      var ar;      var res = true;            if ((ar = re.exec(str)) != null){   
jquery 表单验证
沈荣荣的博客
01-08 293
例子： 默认校验规则 (1)required:true 必输字段 (2)remote:"check.php" 使用ajax方法调用check.php验证输入值 (3)email:true 必须输入正确格式的电子邮件 (4)url:true 必须输入正确格式的网址 (5)date:true 必须输入正确格式的日期 (6)dateISO:true 必须输入正确格式的日期(ISO)，例
jQuery Validate插件实战：表单验证详解
jQuery Validate 是一个强大的前端表单验证插件，它扩展了 jQuery 的功能，使开发者能够轻松地在网页上实现动态和自定义的表单验证。该插件适用于简化HTML5验证，同时也支持旧版浏览器，确保了兼容性。通过集成到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值