`
__SuRa丶Rain
  • 浏览: 45103 次
  • 性别: Icon_minigender_1
  • 来自: 火星
社区版块
存档分类
最新评论

Jquery Ajax校验

阅读更多
test.js
$(document).ready(function(){
 
 var flag1=false;
 $("#userid").blur(function checkUid(){
  var userid=$("#userid").val();
  if(userid==""){
   $("#uid").html("<font color='red' size='2'>用户名不能为空!</font>");
  }else if(userid.length<6||userid.length>15){
   $("#uid").html("<font color='red' size='2'>用户名必须在6到15位之间!</font>");
  }else if(userid.search("[^a-zA-Z0-9\]") != -1){
   $("#uid").html("<font color='red' size='2'>用户名含有非法字符!</font>");
  }else{
   var msg=$.ajax({
    type: "POST",
    url: "checkUserid?userid="+userid,
    beforeSend: function(){$("#uid").html("<font color='red' size='2'>loading......正在提交请稍候。</font>"); },
    success:function(){
     var text=msg.responseText;
     if("false"==text){
      $("#uid").html("<font color='green' size='2'>恭喜你,此用户名还可以注册!</font>");
      flag1=true;
     }else if("true"==text){
      $("#uid").html("<font color='red' size='2'>对不起,此用户名已经被使用!</font>");
     }
    }
    });
  }
  return flag1;
 });
 
 var flag2=false;
 $("#password").blur(function checkPwd(){
  var password=$("#password").val();
  if(password==""){
   $("#pwd").html("密码不能为空!");
  }else if(password.length<6||password.length>15){
   $("#pwd").html("密码必须在6到15位之间!");
  }else{
   $("#pwd").html("");
   flag2=true;
  }
  return flag2;
 });
 
 var flag3=false;
 $("#repassword").blur(function checkRePwd(){
  var password=$("#password").val();
  var repassword=$("#repassword").val();
  if(repassword==""){
   $("#repwd").html("密码不能为空!");
  }else if(repassword.length<6||repassword.length>15){
   $("#repwd").html("密码必须在6到15位之间!");
  }else if(repassword!=password){
   $("#repwd").html("两次输入的密码不一致,请重新输入!");
  }else{
   $("#repwd").html("");
   flag3=true;
  }
  return flag3;
 });
 
 var flag4=false;
 $("#name").blur(function checkNam(){
  var name=$("#name").val();
  if(name==""){
   $("#nam").html("姓名不能为空!");
  }else{
   $("#nam").html("");
   flag4=true;
  }
  return flag4;
 });
 
 $("#reigster").submit(function(){
  if(flag1&&flag2&&flag3&&flag4){
   return true;
  }else{
   $("#name").blur();
   $("#repassword").blur();
   $("#password").blur();
   $("#userid").blur();
   return false;
  }
 });
 
});

 

 

register.jsp

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>用户注册</title>
    
    <meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	
    <script type="text/javascript" src="js/jquery.js" charset="gb2312"></script>
    <script type="text/javascript" src="js/test.js" charset="gb2312"></script>
  </head>
  <body>
  
  <br/>
  <br/>
  
  	<form action="register" method="post" id="reigster">
  		<table>
  		<tr>
  			<td>用户名</td>
  			<td><input type="text" id="userid" name="userid"/></td>
  			<td><span id="uid"></span><font size="2" color="red">${errors.userid[0]}</font></td>
  		</tr>
  		
  		<tr>
  			<td>密码</td>
  			<td><input type="password" id="password" name="password"/></td>
  			<td><font size="2" color="red"><span id="pwd"></span>${errors.password[0]}</font></td>
  		</tr>
  		
  		<tr>
  			<td>确认密码</td>
  			<td><input type="password" id="repassword" name="repassword"/></td>
  			<td><font size="2" color="red"><span id="repwd"></span>${errors.repassword[0]}</font></td>
  		</tr>
  		
  		<tr>
  			<td>姓名</td>
  			<td><input type="text" id=name name="name"/></td>
  			<td><font size="2" color="red"><span id="nam"></span>${errors.name[0]}</font></td>
  		</tr>
  		
  		<tr>
  			<td>&nbsp;</td>
  			<td><input type="submit" value="提交"/>&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" name="重置"/></td>
  		</tr>
  	</table>
  	</form>
  	
  <a href="index.jsp">点击登录</a>
  </body>
</html>

 

  • 大小: 5.6 KB
分享到:
评论

相关推荐

    异步校验jquery-ajax

    本工程有两种ajax异步校验注册时输入的username是否与数据库中的值重复,通过mybatis实现数据库,通过servlet或者struts2实现控制层,通过ajax,jquery,json,实现异步校验

    jquery的ajax校验.zip

    本主题聚焦于jQuery中的Ajax校验,这是一种在客户端进行数据验证的技术,它能够提高用户体验,减少不必要的服务器请求,同时确保提交的数据符合预设的规则。 首先,让我们深入了解一下Ajax。Ajax(异步JavaScript和...

    日期校验,日期校验Ajax,jquery

    日期校验,日期校验Ajax,jquery日期校验,日期校验Ajax,jquery

    Ajax&jQuery校验用户名的例子

    使用Ajax和jQuery技术做的校验用户名的例子,。适合初学者参考

    Ajax 校验不可重复,用的jquery

    Ajax 校验不可重复,用的jquery

    jquery 校验大全 实例

    "jQuery校验大全实例"是针对使用jQuery进行表单验证的一个综合资源,非常适合开发者学习和应用。这个压缩包可能包含了各种jQuery验证插件、代码示例以及详细的教程,旨在帮助开发者实现高效且用户友好的表单验证。 ...

    jquery+ajax 无刷新案例

    在IT行业中,jQuery和AJAX是两种非常关键的技术,它们共同为网页开发提供了无刷新、交互性强的用户体验。本案例“jquery+ajax 无刷新案例”着重展示了如何结合使用这两种技术来实现一个MD5加密的功能,用户在前端...

    jQuery的校验控件的改修

    在IT行业中,jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在Web开发中,表单验证是一个关键环节,用于确保用户输入的数据符合预设的规则和标准。jQuery提供了...

    JQuery+AJAX实现用户名验证

    在IT行业中,前端开发是构建动态网页应用的关键环节,而jQuery和AJAX是其中不可或缺的工具。本篇文章将深入探讨如何使用jQuery与AJAX技术来实现一个简单的用户名验证功能,以此来确保用户输入的用户名的独特性。这个...

    使用 jQuery Ajax 异步登录,并验证用户输入信息(maven)

    使用 jQuery Ajax 异步登录,并验证用户输入信息(maven),图文教程地址:https://blog.csdn.net/qq_40147863/article/details/85999375

    jQuery表单校验插件validate实例代码集

    jQuery表单校验插件validate实例代码集 有多个表同的表单,来共同展现表单验证插件的各种用法,包括判断字符、输入为空、类型判断、适时Ajax方式提示等,通过这些实例可快速掌握验证的方法和要点,此前,源码爱好者...

    ajax校验

    在前端,使用jQuery的`$.ajax`或`$.post`方法发送Ajax请求。创建一个HTML表单,并在用户输入时触发验证: ```html 请输入用户名" /&gt; &lt;span id="usernameError"&gt;&lt;/span&gt; &lt;!-- 其他表单字段 --&gt; 注册 $...

    使用jQuery封装的ajax实现登陆时用户名已存在的提示,注意没有连接数据库去做判断,重点只是实现无刷新的数据交换

    在jQuery中,AJAX功能被封装在`$.ajax()`函数里,使得使用更加方便。以下是一个基本的示例,展示了如何使用jQuery AJAX来检查用户名: ```javascript // 捕获用户名输入的事件 $("#username").on("input", function...

    Jquery校验 (js+实例+帮助文档)

    jQuery是一个广泛使用的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。在Web开发中,表单验证是必不可少的一环,jQuery提供了方便的校验插件,使得前端验证变得简单易行。 一、...

    struts2.1+json+jquery用户名校验

    在前端,jQuery可以用来发送Ajax请求,这通常使用`$.ajax()`或`$.getJSON()`方法。当用户输入用户名后,jQuery会监听输入事件,当触发校验时,发送一个包含用户名的Ajax请求到服务器。收到后端返回的JSON数据后,...

    jquery ajax 异步验证

    ### jQuery AJAX 异步验证详解 #### 一、AJAX概念与原理 ##### 1.1 定义与历史背景 - **定义**: AJAX(Asynchronous JavaScript and XML)是一种使用JavaScript进行异步通信的技术,它使得网页可以在不重新加载...

    struts2+spring+ibatis+jquery ajax的登陆注册实时验证

    Struts2、Spring、iBatis和jQuery AJAX是Java Web开发中的四大核心技术,它们共同构建了一个功能强大的MVC(模型-视图-控制器)架构。本文将深入探讨这些技术在登录注册系统中的应用。 首先,Struts2是Apache基金会...

    ajax的异步校验功能实现

    对于异步校验,我们可以利用jQuery的`$.ajax()`函数或者更简单的`$.get()`或`$.post()`方法。 下面是一个使用jQuery实现的用户名异步校验的基本步骤: 1. **事件监听**:我们需要监听用户的输入,例如当用户离开...

    “AJAX校验用户名是否存在”小例子源码(JQuery+Servlet实现).rar

    在这个"AJAX校验用户名是否存在"的例子中,当用户在前端输入用户名并触发验证事件时,JQuery库会被用来发送AJAX请求。 JQuery是一个广泛使用的JavaScript库,简化了DOM操作、事件处理、动画和Ajax交互。在这个场景...

    Jqueryajax

    **jQuery AJAX** jQuery AJAX 是一个强大的工具,它使得在JavaScript中进行异步数据交互变得简单易行。在Web开发中,AJAX(Asynchronous JavaScript and XML)技术允许页面不需刷新就能从服务器获取数据并局部更新...

Global site tag (gtag.js) - Google Analytics