Ajax日期验证

原创 2015年07月07日 23:17:52




html页面部分:
<html>
<head>
<title>Using Ajax for validation</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
//判断浏览器是否支持ActiveX控件
if (window.ActiveXObject) {
//支持则通过ActiveXObject的一个新实例来创建XMLHttpRequest对象
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//否则把XMLHttpRequest实现为一个本地JavaScript对象。
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function validate() {
createXMLHttpRequest();
var date = document.getElementById("birthDate");
var url = "servlet/ValidationServlet?birthDate=" + escape(date.value);
//设置未决的请求的目标 URL, 方法, 和其他参数
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var mes =xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
var val =xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
setMessage(mes, val);
}
}
}
function setMessage(message, isValid) {
var messageArea = document.getElementById("dateMessage");
var fontColor = "red";
if (isValid == "true") {
fontColor = "green";
}
messageArea.innerHTML = "<font color=" + fontColor + ">"
+ message + " </font>";
}
</script>
</head>
<body>
<h1>Ajax 实例</h1>
生日: <input type="text" size="10" id="birthDate" onchange="validate();"/>
<div id="dateMessage"></div>
</body>
</html>
servlet部分:
import java.io.*;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import javax.servlet.*;
import javax.servlet.http.*;
 
public class ValidationServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
//获取输入的生日
boolean passed = validateDate(request.getParameter("birthDate"));
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
String message = " You have entered an invalid date.";
//判断生日输入是否正确
if (passed) {
message = " You have entered a valid date..";
}
//输出结果
out.println("<response>");
out.println("<passed>" + Boolean.toString(passed) + "</passed>");
out.println("<message>" + message + "</message>");
out.println("</response>");
out.close();
}
private boolean validateDate(String date) {
boolean isValid = true;
//判断日期格式
if(date != null) {
//格式化日期
SimpleDateFormat formatter= new SimpleDateFormat("MM/dd/yyyy");
try {
formatter.parse(date);
} catch (ParseException pe) {
System.out.println(pe.toString());
isValid = false;
}
} else {
isValid = false;
}
//返回判断结果
return isValid;
}
}


当输入一个生日时,页面会将输入的内容发送到服务器端进行判断,并将结果显示在页面上,如图5-2所示。

 

5-2  正确的生日验证



html页面部分:
<html>
<head>
<title>Using Ajax for validation</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
//判断浏览器是否支持ActiveX控件
if (window.ActiveXObject) {
//支持则通过ActiveXObject的一个新实例来创建XMLHttpRequest对象
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//否则把XMLHttpRequest实现为一个本地JavaScript对象。
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function validate() {
createXMLHttpRequest();
var date = document.getElementById("birthDate");
var url = "servlet/ValidationServlet?birthDate=" + escape(date.value);
//设置未决的请求的目标 URL, 方法, 和其他参数
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var mes =xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
var val =xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
setMessage(mes, val);
}
}
}
function setMessage(message, isValid) {
var messageArea = document.getElementById("dateMessage");
var fontColor = "red";
if (isValid == "true") {
fontColor = "green";
}
messageArea.innerHTML = "<font color=" + fontColor + ">"
+ message + " </font>";
}
</script>
</head>
<body>
<h1>Ajax 实例</h1>
生日: <input type="text" size="10" id="birthDate" onchange="validate();"/>
<div id="dateMessage"></div>
</body>
</html>
servlet部分:
import java.io.*;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import javax.servlet.*;
import javax.servlet.http.*;
 
public class ValidationServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
//获取输入的生日
boolean passed = validateDate(request.getParameter("birthDate"));
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
String message = " You have entered an invalid date.";
//判断生日输入是否正确
if (passed) {
message = " You have entered a valid date..";
}
//输出结果
out.println("<response>");
out.println("<passed>" + Boolean.toString(passed) + "</passed>");
out.println("<message>" + message + "</message>");
out.println("</response>");
out.close();
}
private boolean validateDate(String date) {
boolean isValid = true;
//判断日期格式
if(date != null) {
//格式化日期
SimpleDateFormat formatter= new SimpleDateFormat("MM/dd/yyyy");
try {
formatter.parse(date);
} catch (ParseException pe) {
System.out.println(pe.toString());
isValid = false;
}
} else {
isValid = false;
}
//返回判断结果
return isValid;
}
}


当输入一个生日时,页面会将输入的内容发送到服务器端进行判断,并将结果显示在页面上,如图5-2所示。

 

5-2  正确的生日验证

版权声明:本文为博主原创文章,未经博主允许不得转载。

利用ajax无刷新验证注册信息

其大概思路如下: 一.把注册的html页面做好(html+css) 1.不需要form表单,直接用div包着 2.需要四个标签来显示正确、错误的信息显示 3.不用submit提交按钮,直接用b...
  • qq_18297675
  • qq_18297675
  • 2016年07月11日 21:09
  • 4646

验证日期的Java正则表达式

闲着没事的时候,写了个验证日期的正则表达式,弄了大半天,头都大了。由于使用到了反向预搜索模式“(?下面是源代码:import java.util.regex.Matcher;import java.u...
  • bao110908
  • bao110908
  • 2008年02月29日 14:20
  • 18884

验证日期的正则表达式比较全面地验证

 1.验证日期的正则表达式加入闰年的判断以及思路分析进入正题之前,我们需要澄清两个概念:一,什么是合法的日期范围?对于不同的应用场景,这个问题有不同的解释。这里采纳MSDN中的约定:DateTime ...
  • aking8736
  • aking8736
  • 2008年07月31日 21:35
  • 26339

java日期有效性验证

 private static boolean isValidDate(String strValue ) {//20091001字符串         int d = Integer.parseIn...
  • jifeijixufly
  • jifeijixufly
  • 2009年12月28日 11:11
  • 1203

Asp.net MVC中 model 验证方式 ajax +jquery

在项目开发中,最常见的莫过注册,登录,而这其中最常见的莫过于验证了。良好的验证界面会很好的提高用户体验度。 asp.net mvc验证提供了前台的ajax验证方式, 1.非空验证 非空验...
  • qq1162195421
  • qq1162195421
  • 2013年08月17日 11:26
  • 2787

ajax 验证唯一性

ajax 验证唯一性
  • yilukuangpao
  • yilukuangpao
  • 2016年06月09日 09:02
  • 3020

js 日期有效性验证 的一点思考

在日常项目中经常遇到日期输入验证,以前我遇到的项目是日期只能通过日历控件来选择,最近我同事遇到一个问题是日期除了可以通过日历控件来输入也可以手动来输入,可是我们项目中居然没有日期格式的验证方法(备注:...
  • dz45693
  • dz45693
  • 2016年06月12日 21:50
  • 765

验证控件,解决用于ajax提交前的验证,不是submit提交的验证

原文地址:http://www.cnblogs.com/feiyun126/p/3356365.html //解决ajax提交前的验证问题,主要用于onclick事件时对某一区域中(...
  • u013816347
  • u013816347
  • 2017年07月03日 23:12
  • 466

AJAX JSON中日期类型DateTime格式化的序列化自定义对象以及自定义类型参数的问题处理

首先看一下ASP.NET AJAX服务器端对日期类型JSON序列化的处理:(详见Ajax扩展源码中的JavaScriptSerializer.cs)internal static readonly l...
  • zfrong
  • zfrong
  • 2009年05月15日 09:35
  • 12396

jquery 日期比较 以及日期校验

var dateReg = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/ ;   extakeOverTime = “2017/1/5”;     if(!dateRe...
  • flymoringbird
  • flymoringbird
  • 2017年01月05日 20:54
  • 549
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax日期验证
举报原因:
原因补充:

(最多只允许输入30个字)