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的日期验证.rar

  • 2009年06月06日 19:36
  • 30KB
  • 下载

类似Ajax日期控件,纯js

  • 2014年03月17日 13:24
  • 33KB
  • 下载

ajax传递日期参数问题

今天遇到ajax传输日期参数后台无法识别的问题,错误异常如下。从异常中可以看出传输到后台的日期数据格式为Thu Aug 13 2015 19:45:20 GMT+0800 (中国标准时间),这种格式的...

ajax实现日期控件

  • 2008年06月27日 09:47
  • 9KB
  • 下载

AJAX读取日期

在商城项目中,前台想实现这样一个功能:通过日历读取当前商品(飞机票)价格。      可以在后台将日期和价格的数据从数据库中读取出来,然后保存成一个json格式的文件,供前台使用数据。 ...

ajax日期参数格式问题

ajax不支持二进制数据传输,所以ajax在传输参数的时候,会调用toString方法把参数转成字符串。日期一般由年、月、日、小时、分、秒、毫秒组成,可以把日期转为2015-08-17 10:12:1...

JavaScript中JSON类型的日期格式转换(Ajax)

在使用JSON传递日期格式后,有时候直接取得的日期会发现无法正常显示。这个时候需要我们对取到的值进行进一步加工处理。 一、直接调用JSON方法,对数据进行封装后传递的取值: 1、对日期进行JSON...

日期的计算多少天 多少月 多少年后 前台通过了ajax调用后台处理获取返回值

需求是因为要做一个日期联动 通过日期控件的选择的日期值通过调用axjx传值到后台  前台文本框: class="Wdate" onClick="WdatePicker({readOnly:true,...

ajax处理请求,以JSON数据格式返回,(json时间日期返回时对象---》日期格式)

填写个人资料,当填写身份证信息时,ajax方式查询数据库,当数据库有记录时会提示《显示载入上一次信息》,当有记录时action以json方式输出到前端jsp 后台Action public voi...

验证输入日期.rar

  • 2010年07月02日 09:46
  • 4KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax日期验证
举报原因:
原因补充:

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