进口税金计算:使用jquery实现用户名验证
来源:百度文库 编辑:九乡新闻网 时间:2024/05/10 06:58:22
第一:注册页面代码 <%@ page language="java" contentType="text/html; charset=GBK"%>"css/style.css" rel="stylesheet" type="text/css" />测试用户名表单输入 "hidden" name="tmp" id="tmp" value="" />
第二:css代码(如果大家想设计的漂亮一些,需要在此多下些功夫,我只简单的设计了一个)div.name-pop{
background-color:#EDEDEB;
position:absolute;
height:auto;
left:310px;
top:14px;
width:320px;
border: 1px red solid;
display:none;
padding-left:5px;
padding-top:5px;
padding-bottom: 5px;
padding-right: 5px
}
第三:function.js代码function chkUsername() {
var username = $.trim($("#username").val());
if(username=="") {
return 0;
}
else if( /^\d.*$/.test( username ) ){
//用户名不能以数字开头
return -1;
}
else if(username.length<6 || username.length>18 ){
//合法长度为6-18个字符
return -2;
}
else if(! /^\w+$/.test( username ) ){
//用户名只能包含_,英文字母,数字
return -3;
}
else if(! /^([a-z]|[A-Z])[0-9a-zA-Z_]+$/.test( username ) ){
//用户名只能英文字母开头
return -4;
}
else if(!(/[0-9a-zA-Z]+$/.test( username ))){
//用户名只能英文字母或数字结尾
return -5;
}
return 1;
}
$(document).ready(function(){
/** ----------- 用户名输入框事件 ----------- */
//当文本框成为焦点时
$("#username").bind("focus", function(){
var ret=chkUsername();
if(ret==0){
//用户名输入框为空,显示规则
$("#div_uname_err_info").hide();
$("#div_uname_rule").show();
}
return false;
});
//当文本框失去焦点时
$("#username").bind("blur", function(){ var ret=chkUsername();
$("#div_uname_rule").hide();
$("#div_uname_err_info").show();
if (ret>0){
var url="testServlet?name="+$("#username").val();
$.get(url,null,callback);
}
else if(ret==0){
//用户名输入框为空,显示规则
$("#div_uname_err_info").html("用户名不能为空");
}
else {
if(ret == -1){
//显示具体的错误内容
$("#div_uname_err_info").html("用户名不能以数字开头");
}
else if(ret == -2){ $("#div_uname_err_info").html("合法长度为6-18个字符");
}
else if(ret == -3){
$("#div_uname_err_info").html("用户名只能包含_,英文字母,数字 ");
}
else if(ret == -4){
$("#div_uname_err_info").html("用户名只能英文字母开头");
}
else if(ret == -5){
$("#div_uname_err_info").html("用户名只能英文字母或数字结尾");
}
}
return false;
});
});
function verify(){
var ret=chkUsername();
if (ret>0){
var url="testServlet?name="+$("#username").val();
$.get(url,null,callback); //将文本框 中的数据发送到页面上
}
}
//接收服务器返回的数值,将服务器返回的数据动态的显示在页面上
function callback(data){
var resultObj=$("#div_uname_err_info");
resultObj.html(data);
}
第四:编写servlet,我简写了,只做测试用 import java.io.IOException;
import java.io.PrintWriter;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class testServlet extends HttpServlet { /**
*
*/
private static final long serialVersionUID = -416104398788674508L; public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=GBK");
String name=request.getParameter("name");
PrintWriter out=response.getWriter();
if (name.equals("hanmei")){
out.println("用户名"+name+"已存在");
}else{
out.println("用户名"+name+"不存在,可以使用");
}
} public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { doGet(request,response);
}
}
第五:修改web.xml文件
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
This is the description of my J2EE component
This is the display name of my J2EE component
testServlet
testServlet
testServlet
/testServlet
index.jsp
备注:别忘了下载jquery文件拷贝到相应的路径下 通过以上步骤,就可以实现用户验证了
用户名:"text" id="username"> | "button" value="检测" onclick="verify()"> | "div_uname_rule" class="name-pop"> ¡¤6~18个字符,包括字母、数字、下划线 ¡¤字母开头,字母和数字结尾,不区分大小写 "div_uname_err_info" class="name-pop"> |
密码 :"text" id="password"> |
background-color:#EDEDEB;
position:absolute;
height:auto;
left:310px;
top:14px;
width:320px;
border: 1px red solid;
display:none;
padding-left:5px;
padding-top:5px;
padding-bottom: 5px;
padding-right: 5px
}
第三:function.js代码function chkUsername() {
var username = $.trim($("#username").val());
if(username=="") {
return 0;
}
else if( /^\d.*$/.test( username ) ){
//用户名不能以数字开头
return -1;
}
else if(username.length<6 || username.length>18 ){
//合法长度为6-18个字符
return -2;
}
else if(! /^\w+$/.test( username ) ){
//用户名只能包含_,英文字母,数字
return -3;
}
else if(! /^([a-z]|[A-Z])[0-9a-zA-Z_]+$/.test( username ) ){
//用户名只能英文字母开头
return -4;
}
else if(!(/[0-9a-zA-Z]+$/.test( username ))){
//用户名只能英文字母或数字结尾
return -5;
}
return 1;
}
$(document).ready(function(){
/** ----------- 用户名输入框事件 ----------- */
//当文本框成为焦点时
$("#username").bind("focus", function(){
var ret=chkUsername();
if(ret==0){
//用户名输入框为空,显示规则
$("#div_uname_err_info").hide();
$("#div_uname_rule").show();
}
return false;
});
//当文本框失去焦点时
$("#username").bind("blur", function(){ var ret=chkUsername();
$("#div_uname_rule").hide();
$("#div_uname_err_info").show();
if (ret>0){
var url="testServlet?name="+$("#username").val();
$.get(url,null,callback);
}
else if(ret==0){
//用户名输入框为空,显示规则
$("#div_uname_err_info").html("用户名不能为空");
}
else {
if(ret == -1){
//显示具体的错误内容
$("#div_uname_err_info").html("用户名不能以数字开头");
}
else if(ret == -2){ $("#div_uname_err_info").html("合法长度为6-18个字符");
}
else if(ret == -3){
$("#div_uname_err_info").html("用户名只能包含_,英文字母,数字 ");
}
else if(ret == -4){
$("#div_uname_err_info").html("用户名只能英文字母开头");
}
else if(ret == -5){
$("#div_uname_err_info").html("用户名只能英文字母或数字结尾");
}
}
return false;
});
});
function verify(){
var ret=chkUsername();
if (ret>0){
var url="testServlet?name="+$("#username").val();
$.get(url,null,callback); //将文本框 中的数据发送到页面上
}
}
//接收服务器返回的数值,将服务器返回的数据动态的显示在页面上
function callback(data){
var resultObj=$("#div_uname_err_info");
resultObj.html(data);
}
第四:编写servlet,我简写了,只做测试用 import java.io.IOException;
import java.io.PrintWriter;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class testServlet extends HttpServlet { /**
*
*/
private static final long serialVersionUID = -416104398788674508L; public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=GBK");
String name=request.getParameter("name");
PrintWriter out=response.getWriter();
if (name.equals("hanmei")){
out.println("用户名"+name+"已存在");
}else{
out.println("用户名"+name+"不存在,可以使用");
}
} public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { doGet(request,response);
}
}
第五:修改web.xml文件
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
备注:别忘了下载jquery文件拷贝到相应的路径下 通过以上步骤,就可以实现用户验证了
使用jquery实现用户名验证
jquery formValidtor验证
jquery的验证插件
jquery表单验证,jquery.validate全攻略
jQuery 选择器的使用
请不要使用jQuery
使用轮廓以及扇形扫描实现qq的验证码识别
jquery实现图片代替滚动条
jQuery+CSS实现动态滑动菜单导航
关于《?jQuery?formValidator表单验证插件》之二
使用Git hook来校验push用户名的合法性
在多个网站使用同一个用户名容易被跟踪
使用jQuery架构javascript基础体系
JQuery
jQuery ajax实现顶一下,踩一下效果
利用jquery实现图片显隐特效 | 知更鸟
jQuery+CSS实现竖向漂亮的滑动导航
jsp实现验证码两个例子
使用 Python 实现多进程
使用PuTTy实现本地文件上传下载
戴尔Windows Vista 下实现启动后以指定的用户名和密码自动登录的方法
我国科学家验证物理界预言隐形斗篷有望实现
中国科学家验证物理界预言 隐形斗篷有望实现
javascript实现通用表单验证函数 - Sandy交流区 - CSDNBlog