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> </td>
<td><input type="submit" value="提交"/> <input type="reset" name="重置"/></td>
</tr>
</table>
</form>
<a href="index.jsp">点击登录</a>
</body>
</html>
- 大小: 5.6 KB
分享到:
相关推荐
本工程有两种ajax异步校验注册时输入的username是否与数据库中的值重复,通过mybatis实现数据库,通过servlet或者struts2实现控制层,通过ajax,jquery,json,实现异步校验
本主题聚焦于jQuery中的Ajax校验,这是一种在客户端进行数据验证的技术,它能够提高用户体验,减少不必要的服务器请求,同时确保提交的数据符合预设的规则。 首先,让我们深入了解一下Ajax。Ajax(异步JavaScript和...
日期校验,日期校验Ajax,jquery日期校验,日期校验Ajax,jquery
使用Ajax和jQuery技术做的校验用户名的例子,。适合初学者参考
Ajax 校验不可重复,用的jquery
"jQuery校验大全实例"是针对使用jQuery进行表单验证的一个综合资源,非常适合开发者学习和应用。这个压缩包可能包含了各种jQuery验证插件、代码示例以及详细的教程,旨在帮助开发者实现高效且用户友好的表单验证。 ...
在IT行业中,jQuery和AJAX是两种非常关键的技术,它们共同为网页开发提供了无刷新、交互性强的用户体验。本案例“jquery+ajax 无刷新案例”着重展示了如何结合使用这两种技术来实现一个MD5加密的功能,用户在前端...
在IT行业中,jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在Web开发中,表单验证是一个关键环节,用于确保用户输入的数据符合预设的规则和标准。jQuery提供了...
在IT行业中,前端开发是构建动态网页应用的关键环节,而jQuery和AJAX是其中不可或缺的工具。本篇文章将深入探讨如何使用jQuery与AJAX技术来实现一个简单的用户名验证功能,以此来确保用户输入的用户名的独特性。这个...
使用 jQuery Ajax 异步登录,并验证用户输入信息(maven),图文教程地址:https://blog.csdn.net/qq_40147863/article/details/85999375
jQuery表单校验插件validate实例代码集 有多个表同的表单,来共同展现表单验证插件的各种用法,包括判断字符、输入为空、类型判断、适时Ajax方式提示等,通过这些实例可快速掌握验证的方法和要点,此前,源码爱好者...
在前端,使用jQuery的`$.ajax`或`$.post`方法发送Ajax请求。创建一个HTML表单,并在用户输入时触发验证: ```html 请输入用户名" /> <span id="usernameError"></span> <!-- 其他表单字段 --> 注册 $...
在jQuery中,AJAX功能被封装在`$.ajax()`函数里,使得使用更加方便。以下是一个基本的示例,展示了如何使用jQuery AJAX来检查用户名: ```javascript // 捕获用户名输入的事件 $("#username").on("input", function...
jQuery是一个广泛使用的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。在Web开发中,表单验证是必不可少的一环,jQuery提供了方便的校验插件,使得前端验证变得简单易行。 一、...
在前端,jQuery可以用来发送Ajax请求,这通常使用`$.ajax()`或`$.getJSON()`方法。当用户输入用户名后,jQuery会监听输入事件,当触发校验时,发送一个包含用户名的Ajax请求到服务器。收到后端返回的JSON数据后,...
Struts2、Spring、iBatis和jQuery AJAX是Java Web开发中的四大核心技术,它们共同构建了一个功能强大的MVC(模型-视图-控制器)架构。本文将深入探讨这些技术在登录注册系统中的应用。 首先,Struts2是Apache基金会...
对于异步校验,我们可以利用jQuery的`$.ajax()`函数或者更简单的`$.get()`或`$.post()`方法。 下面是一个使用jQuery实现的用户名异步校验的基本步骤: 1. **事件监听**:我们需要监听用户的输入,例如当用户离开...
在这个"AJAX校验用户名是否存在"的例子中,当用户在前端输入用户名并触发验证事件时,JQuery库会被用来发送AJAX请求。 JQuery是一个广泛使用的JavaScript库,简化了DOM操作、事件处理、动画和Ajax交互。在这个场景...
**jQuery AJAX** jQuery AJAX 是一个强大的工具,它使得在JavaScript中进行异步数据交互变得简单易行。在Web开发中,AJAX(Asynchronous JavaScript and XML)技术允许页面不需刷新就能从服务器获取数据并局部更新...