仿凤凰网的注册页面,javascript完成简单的空/邮箱格式/字符串的长度校验 ajax完成服务器端是否同名校验
2012-03-19 00:47
561 查看
register.jsp界面代码如下:
注意以下几点:1,文本框的name,id最好一致,规范性的命名才符合实际应用,
2,后面校验的显示信息此处我定义的为原来id+“js”,当然这里可以随意,不过,关于验证所有的文本框是否为空这方法中我把封装一工具方法,当然可以每个都判断,不过太麻烦,我见凤凰网的注册页面就是这样一个一个的写,太麻烦了。
代码如下:
页面如下:
当然界面可以加些图片,因为我美感不好,弄个丑八怪,基本雏形就这样。
下面是js代码:
注意以下几点:1,文本框的name,id最好一致,规范性的命名才符合实际应用,
2,后面校验的显示信息此处我定义的为原来id+“js”,当然这里可以随意,不过,关于验证所有的文本框是否为空这方法中我把封装一工具方法,当然可以每个都判断,不过太麻烦,我见凤凰网的注册页面就是这样一个一个的写,太麻烦了。
代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <base href="<%=basePath%>"> <head> <link href="css/main.css" type="text/css" media="screen" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/register.js"></script> <title>我的博客系统注册</title> </head> <body> <div class="registerBody"> <div style="height:500px;" class="registerBox" > <div class="tit" style="padding:10px 10px 0 0; height:35px; background-position:left bottom;"> <span style="float:right"> 已经注册?请直接 <a href=""> <strong class="u_blue"> <u>登录</u> </strong> </a> </span> <h3 class="u_blue">注册用户</h3> </div> <hr/> <s:form name="reg" action="register" validate="true"> <table align="center"> <tr> <td> <label> 帐号: </label> </td> <td> <input type="text" id="username" name="username" /> * </td> <td> <div id="usernameJS"></div> </td><td id="usernameMessage"></td> </tr> <tr> <td> <label> 密码: </label> </td> <td> <input type="password" id="password" name="password" /> * </td> <td> <div id="passwordJS"></div> </td> </tr> <tr> <td> <label> 确认密码: </label> </td> <td> <input type="password" id="repassword" name="repassword" /> * </td> <td> <div id="repasswordJS"></div> </td> </tr> <tr> <td> <label> 邮箱 : </label> </td> <td> <input type="text" id="email" name="email" /> * </td> <td> <div id="emailJS"></div> </td> </tr> <tr> <td> <label> 昵称: </label> </td> <td> <input type="text" id="nickname" name="nickname" /> * </td> <td> <div id="nicknameJS"></div> </td> </tr> <tr> <td> <label> 密码保护问题: </label> </td> <td> <input type="text" id="question" name="question" /> * </td> <td> <div id="questionJS"></div> </td> </tr> <tr> <td> <label> 密码保护的答案: </label> </td> <td> <input type="text" id="answer" name="answer" /> * </td> <td> <div id="answerJS"></div> </td> </tr> <tr> <td> <input type="submit" id="submit" value="注册" onclick="return doSubmit()"/> </td> </tr> </table> </s:form> </div> <hr/> <div class="copyright" align="center"> 博客网站 版权所有 <br> Copyright © 2008-2012 Henu University. All Rights Reserved. </div></div> </body> </html>
页面如下:
当然界面可以加些图片,因为我美感不好,弄个丑八怪,基本雏形就这样。
下面是js代码:
$().ready(function() { isNullValidate("#username", "用户名不能为空","请输入常用的用户名,该用户名将作为登录"), isNullValidate("#password", "密码不能为空","请设置您的密码"), isNullValidate("#repassword", "确认密码不能为空","请输入常用密码"), isNullValidate("#nickname","昵称不能为空","请设置您的昵称"), isNullValidate("#question", "密保问题不能为空","请设置您的密保"), isNullValidate("#answer", "答案不能为空","请设置您的密保问题"), isNullValidate("#email","邮箱不能为空","请设置您的邮箱") validateEmail(), validateUsername(), validateLength("#username",3,20,"用户名长度必须为3-20位"), validateLength("#password",3,30,"用户名长度必须为3-30位"), validateEqual("#password","#repassword","密码不一致") }) //isNull校验是否为空 function isNullValidate(id, message,messageTip) { //失去焦点 进行校验 $(id).blur(function(){ isNull(id,message); }); //得到焦点显示的提示信息 $(id).focus(function(){ showTip(id,messageTip); }); } function showTip(id,messageTip){ var idJS= id + "JS"; $(idJS).css({"color":"black"}); showMessage(idJS,messageTip); } function isNull(id,message){ var value = $(id).val(); var idJS = id + "JS"; if (value == null || value == "") { $(idJS).css({"color":"red"}); $(id).css({"background":"gray","border-color":"red","border":""}); showMessage(idJS, message); return false; } else { $(id).css({"background":"white"}); showMessage(idJS, ""); showPic(idJS); return true; } } //validateLength校验长度 function validateLength(id, min, max, message) { $(id).blur(function() { validate_length(id,min,max,message); }) } function validate_length(id,min,max,message){ var idJS = id + "JS"; var value = $(id).val(); if (value.length < min || value.length > max){ showMessage(idJS, message); $(idJS).css({"color":"red"}); return false; } else{ showMessage(idJS, ""); showPic(idJS); return true; } } //validateEqual校验是否相等 function validateEqual(id1, id2, message) { //此处无法$(id1,id2),否则将出现奇怪的错误,而其他网站也同样有这样的bug //比如前两次分别输入密码(password,repassword)相同,当改变第一个密码加其他的后不提示密码不一致 $(id2).blur(function() { validate_equal(id1,id2,message); }) } function validate_equal(id1,id2,message){ var idJS2 = id2 + "JS"; var value1 = $(id1).val(); var value2 = $(id2).val(); if (value1 != value2) { showMessage(idJS2, message); $(idJS2).css({"color":"red"}); $(id2).css({"background":"gray","border-color":"red","border":""}); $(id1).css({"background":"gray","border-color":"red","border":""}); return false; } else { $(id1).css({"background":"white"}); $(id2).css({"background":"white"}); showMessage(idJS2, ""); showPic(idJS2); return true; } } //validateEmali校验email格式 function validateEmail() { $("#email").blur(function(){ isEmail(); } ) } function isEmail(){ var email = $("#email").val(); var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; if (reg.test(email)) { // showMessage("#emailJS", ""); // showPic("#emailJS"); return true; } else { showMessage("#emailJS", "Email格式不正确"); $("#emailJS").css({"color":"red"}); $("#email").css({"background":"gray","border-color":"red","border":""}); return false; } } function validateName(){ $.ajax( { type : "POST", url : "executeUsername", data : "username=" + $("#username").val(), success : getValidateName, dataType : "text" }); } function getValidateName(message) { if(message == "false"){ showMessage("#usernameJS","用户名已注册,请更换注册名"); $("#username").css({"background":"gray","border-color":"red","border":""}); $("#usernameJS").css({"color":"red"}); return false; } else{ showMessage("#usernameJS","恭喜你,此用户名可用"); $("#username").css({"background":"white"}); $("#usernameJS").css({"color":"green"}); return true; } } //valivateUsername校验用户名是否被注册 function validateUsername() { $("#username").blur(function(){ var value=$("#username").val(); if(value!=null&&value!=""){ validateName(); }else return false; } ) } //showMessage工具方法,显示某id需要显示的信息 function showMessage(id, message) { $(id).html(message); } function showPic(id) { $(id).append("<img src='images/register_ok.png'></img>"); } function doSubmit(){ if(isNull("#username", "用户名不能为空","#usernameJS") && isNull("#password", "密码不能为空","#passwordJS") && isNull("#repassword", "确认密码不能为空","#repasswordJS")&& isNull("#nickname","昵称不能为空","#nicknameJS") && isNull("#question", "密保问题不能为空","#questionJS")&& isNull("#answer", "答案不能为空","#answerJS") && isNull("#email","邮箱不能为空","#emailJS") && isEmail() // && validateName() && validate_length("#username",3,20,"用户名长度必须为3-20位") && validate_length("#password",3,30,"用户名长度必须为3-30位") && validate_equal("#password","#repassword","密码不一致")){ return true; } else { alert("请重新输入"); return false; } }相信大家也看到了,
$().ready(function() 定义页面加载的脚本,这里我们绑定文本框的focus和blur事件,即,聚焦和失去焦点,当聚焦时在div里显示出要输入的信息,而失去焦点时进行校验,这里有个关键的,利用ajax往action里查询是否有输入的用户名,并返回true或false字符串,所以
function validateName(){ $.ajax( { type : "POST", url : "executeUsername", data : "username=" + $("#username").val(), success : getValidateName, dataType : "text" }); }传参数,返回函数处理如下:
function getValidateName(message) { if(message == "false"){ showMessage("#usernameJS","用户名已注册,请更换注册名"); $("#username").css({"background":"gray","border-color":"red","border":""}); $("#usernameJS").css({"color":"red"}); return false; } else{ showMessage("#usernameJS","恭喜你,此用户名可用"); $("#username").css({"background":"white"}); $("#usernameJS").css({"color":"green"}); return true; } }
action中处理:
public String executeUsername(){ HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("UTF-8"); PrintWriter writer = null; try { writer = response.getWriter(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } if(userService.regusterUsername(username)){ writer.print("false"); }else{ writer.print("true"); } return null; }此时基本完成,下面是效果图:
相关文章推荐
- 教你一天玩转JavaScript(二)——完成对注册页面的数据的简单校验
- 教你一天玩转JavaScript(五)——使用JavaScript完成注册页面表单提示及校验
- JavaScript学习——使用JS完成注册页面表单校验
- ajax发送中执行ajax,并实现跳转其他页面 ,注册页面最后一个校验邮箱
- 学习aiax(javascript)--页面无刷新用ajax检查用户名是否已注册(POST方式)
- Javascript扩展String.prototype实现格式金额、格式时间、字符串连接、计算长度、是否包含、日期计算等功能
- JavaScript 完成注册页面表单校验的实例
- 使用JS完成注册页面表单简单校验
- 学习aiax(javascript)--页面无刷新用ajax检查用户名是否已注册(POST方式)
- 注册界面 用javascript检查输入信息格式是否正确 完整版
- JavaScript、CSS、JSP 实现用户注册页面与信息校验
- JavaScript简单的页面注册
- ios菜鸟之路:用户注册 验证邮箱格式是否正确
- JavaScript简单验证表单空值及邮箱格式的方法
- JavaScript获取随机数,要求是长度已知的字符串格式
- javascript js 判断页面是否加载完成
- struts2中使用ajax验证邮箱(用户名)是否被注册
- ajax进行邮箱是否已经注册验证出的错
- Javascript判断页面是否加载完成 推荐
- ajax入门 json格式(①异步校验用户名是否存在 ②站内搜索)