`

Ajax的常用技巧(1)----实现表单数据验证

    博客分类:
  • Ajax
阅读更多

 为了保证信息的有效性和正确性,防止数据的错误和无效,在使用数据之前,通常要对浏览者在客户端输入的数据进行验证。但是这种处理方式并不能解决所有的验证问题,例如,在进行用户信息注册时,客户端只能实现类似是否填写了必要的信息,长度是否满足需求等基本的有效性检查,但是对于所填写的用户信息是否已经被占用等诸如此类的检查,在客户端脚本中是没有办法实现的。
同时,如果按照传统的方式将此类验证逻辑放在服务端实现,也会因为面临需要整个页面刷新的问题,而使得问题不能以直观的方式迅速显示在用户面前。借助Ajax技术,在异步交互的前提下,调用服务器端事先编写好的验证逻辑,可以很好的解决此问题。
数据的验证有两方面的含义,一方面是数据格式正确性的验证;一种是数据数值的验证。通常数据格式的验证都是在客户端进行,而数据数值的验证在服务器端进行。在使用Ajax技术进行数据验证时,应该确保数据格式验证要优先于数据数字验证。
现在创建一个实例,以显示Ajax技术的数据验证功能。该实例验证分为两部分,一部分是数据格式验证;一部分是数据数值验证。为了更加有效地反应表单数据验证,这里采用了数据库表中的数据验证。
注意:为了减少程序操作的复杂度,突出Ajax表单中的数据验证功能。这里采用了Access数据库。


1,服务器端代码


该实例服务器端代码主要具有两个功能,首先查询客户端传递的名称在数据库中是否存在,如果存在,则不允许数据插入到数据库中;如果查询数据不存在,则向数据库表中插入数据。该实例需要使用数据库操作,故单独创建一个jsp文件链接数据。打开记事本,输入下列代码:

<%@ page language="java" import="java.util.*,java.io.File,java.sql.*" pageEncoding="GBK"%>
<%@page contentType="text/html;charset=gb2312"%>
<%
 int status=0;
  String name=request.getParameter("name");
  name=new   String(name.getBytes("ISO-8859-1"), "UTF-8"); 
 //  out.print(name);
  String insertSql="insert into test (NAME) values ('"+name+"')";
  String sql="select * from test where NAME='"+name+"'";
 String   dbUr1="jdbc:odbc:driver={Microsoft Access Driver (*.mdb)};DBQ=E:"+File.separator+"dataAnalysis"+File.separator+"test.mdb";   
		  String   user="";   
		  String   password="";  
		  try{ 
		  Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");   
		  Connection   c=DriverManager.getConnection(dbUr1,user,password);   
		  Statement s=c.createStatement();   
		  ResultSet   r=s.executeQuery(sql);   
		 if(r.next()){   
			 status=1;
		  }   
		  else{
			  s.executeUpdate(insertSql);
		  }
		    s.close();  
		  }catch(Exception e){
		  e.printStackTrace();
		  }
		 
  out.print(status); 
%>

可见创建了变量status,当存在时,status赋值为1,否则赋值为0,最后返回status。

2,客户端代码


客户端代码主要用来校验数据格式和异步传输数据。打开记事本,输入下列代码:

<%@ page language="java" import="java.util.*,com.njue.DBManager.*" pageEncoding="GBK"%>
<html>
<head>
<title>Simple AjaxExample </title>
<script type="text/javascript">
var xmlHttp;
   var name;
   var password;
   var password1;
function createXMLHttpRequest(){
   if(window.ActiveXObject) {
     xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");//创建XMLHttpRequet对象
   }
  else if (window.XMLHttpRequest) {
     xmlHttp=new XMLHttpRequest();//创建XMLHttpRequet对象
     }
 }
function startRequest() {
 createXMLHttpRequest();
   
 xmlHttp.onreadystatechange=handleStateChange;
 xmlHttp.open("POST", "Ran.jsp", true);
 var str="name="+name;
  xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 xmlHttp.send(str);
 }
function handleStateChange() {
  if(xmlHttp.readyState==4) {
 if(xmlHttp.status==200) {
  if( xmlHttp.responseText==1)
  document.getElementById("nameInfo").innerHTML="<font color='red'>该昵称已存在</font>";
  else
  alert("恭喜你,注册成功!");
     }
  }
}
function check(){
if(name==""){
document.getElementById("nameInfo").innerHTML="<font color='red'>昵称不能为空!</font>";
return false;
}
else if(password==""){
document.getElementById("passwordInfo").innerHTML="<font color='red'>密码不能为空!</font>";
return false;
}
else if(password1==""){
document.getElementById("password1Info").innerHTML="<font color='red'>密码不能为空!</font>";
return false;
}
else if(password!=password1){
document.getElementById("password1Info").innerHTML="<font color='red'>两次输入的密码不一致!</font>";
return false;
}
else {
clear();
return true;
}
}
function exec(){
clear();
name=document.getElementById("userName").value;
password=document.getElementById("passWord").value;
password1=document.getElementById("passWord1").value;
if(check()==true){
startRequest();
}
}
function clear(){
document.getElementById("nameInfo").innerHTML="";
document.getElementById("passwordInfo").innerHTML="";
document.getElementById("password1Info").innerHTML="";
}
</script>
</head>
<body>
  <form action="#">
  <div align="center">
  <table border="1" >
<tr><td align="center" valign="center"> 昵称: <input id="userName"/><div id="nameInfo"></div><br/></td></tr>
 <tr><td>请输入密码: <input type="password" id="passWord"/><div id="passwordInfo"></div><br/></td></tr>
 <tr><td> 请再次输入密码: <input type="password" id="passWord1"/><div id="password1Info"></div><br/><tr/><td/>
 <tr><td><input type="button" value="注册"  onclick="exec(); "/></td></tr>
  </table>
  </div>
</form>
</body>
</html>


 

更多详细信息请查看java教程网 http://www.itchm.com/forum-59-1.html
分享到:
评论

相关推荐

    YOLO算法-城市电杆数据集-496张图像带标签-电杆.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

    (177406840)JAVA图书管理系统毕业设计(源代码+论文).rar

    JAVA图书管理系统毕业设计(源代码+论文) JAVA图书管理系统毕业设计(源代码+论文) JAVA图书管理系统毕业设计(源代码+论文) JAVA图书管理系统毕业设计(源代码+论文) JAVA图书管理系统毕业设计(源代码+论文) JAVA图书管理系统毕业设计(源代码+论文) JAVA图书管理系统毕业设计(源代码+论文) JAVA图书管理系统毕业设计(源代码+论文) JAVA图书管理系统毕业设计(源代码+论文) JAVA图书管理系统毕业设计(源代码+论文) JAVA图书管理系统毕业设计(源代码+论文) JAVA图书管理系统毕业设计(源代码+论文) JAVA图书管理系统毕业设计(源代码+论文) JAVA图书管理系统毕业设计(源代码+论文) JAVA图书管理系统毕业设计(源代码+论文) JAVA图书管理系统毕业设计(源代码+论文) JAVA图书管理系统毕业设计(源代码+论文) JAVA图书管理系统毕业设计(源代码+论文) JAVA图书管理系统毕业设计(源代码+论文) JAVA图书管理系统毕业设计(源代码+论文) JAVA图书管理系统毕业设计(源代码+论文) JAVA图书管理系统毕业设计(源代

    (35734838)信号与系统实验一实验报告

    内容来源于网络分享,如有侵权请联系我删除。另外如果没有积分的同学需要下载,请私信我。

    YOLO算法-椅子检测故障数据集-300张图像带标签.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

    基于小程序的新冠抗原自测平台小程序源代码(java+小程序+mysql+LW).zip

    系统可以提供信息显示和相应服务,其管理新冠抗原自测平台小程序信息,查看新冠抗原自测平台小程序信息,管理新冠抗原自测平台小程序。 项目包含完整前后端源码和数据库文件 环境说明: 开发语言:Java JDK版本:JDK1.8 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/idea Maven包:Maven3.3 部署容器:tomcat7 小程序开发工具:hbuildx/微信开发者工具

    YOLO算法-俯视视角草原绵羊检测数据集-4133张图像带标签-羊.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

    (171674830)PYQT5+openCV项目实战:微循环仪图片、视频记录和人工对比软件源码

    内容来源于网络分享,如有侵权请联系我删除。另外如果没有积分的同学需要下载,请私信我。

    新建 文本文档.docx

    新建 文本文档.docx

    hw06.zip

    hw06

    3. Kafka入门-安装与基本命令

    3. Kafka入门-安装与基本命令

    燃气管道施工资质和特种设备安装改造维修委托函.docx

    燃气管道施工资质和特种设备安装改造维修委托函.docx

    The state of AI 2024.pdf

    AI大模型研究相关报告

    lab02.zip

    lab02

    Unity视频插件AVPro的Win端2.2.3

    仅供学习使用,其他用途请购买正版资源AVPro Video Core Windows Edition 2.2.3 亲测可用的视频播放插件,能丝滑播放透明视频等.

    建设工程消防验收现场指导意见表.docx

    建设工程消防验收现场指导意见表.docx

    MVIMG_20241222_194113.jpg

    MVIMG_20241222_194113.jpg

    五相电机双闭环矢量控制模型-采用邻近四矢量SVPWM-MATLAB-Simulink仿真模型包括: (1)原理说明文档(重要):包括扇区判断、矢量作用时间计算、矢量作用顺序及切时间计算、PWM波的生成

    五相电机双闭环矢量控制模型_采用邻近四矢量SVPWM_MATLAB_Simulink仿真模型包括: (1)原理说明文档(重要):包括扇区判断、矢量作用时间计算、矢量作用顺序及切时间计算、PWM波的生成; (2)输出部分仿真波形及仿真说明文档; (3)完整版仿真模型:包括邻近四矢量SVPWM模型和完整双闭环矢量控制Simulink模型; 资料介绍过程十分详细,零基础手把手教学,资料已经写的很清楚

    YOLO算法-锡罐-牙罐-盖子打开数据集-179张图像带标签-锡罐-牙罐-盖子打开.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

    java毕设项目之ssm基于JSP的乡镇自来水收费系统+jsp(完整前后端+说明文档+mysql+lw).zip

    项目包含完整前后端源码和数据库文件 环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/idea Maven包:Maven3.3 服务器:tomcat7

Global site tag (gtag.js) - Google Analytics