JQuery validate插件验证用户注册信息


Posted in Javascript onMay 11, 2016

使用JQuery的validate插件做客户端验证非常方便,下面做一个使用validate插件验证用户注册信息的例子。

本实例使用的是1.5版本

示例是在SSH下做的,代码如下:

registe.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>注册页面</title> 
<mce:script type="text/javascript" src="js/jquery.1.4.2.js" mce_src="js/jquery.1.4.2.js"></mce:script> 
<mce:script type="text/javascript" src="js/validate/jquery.validate.js" mce_src="js/validate/jquery.validate.js"></mce:script> 
<link href="js/validate/jquery.validate.css" mce_href="js/validate/jquery.validate.css" type="text/css" rel="stylesheet"/> 
<mce:script type="text/javascript"><!-- 
//扩展validator的校验方法 
$.validator.addMethod("onlyLetterAndDigit",function(value, element, params){ 
 var regex=new RegExp('^[0-9a-zA-Z]+$'); 
 return regex.test(value); 
},"只能输入字母或数字"); 
 
$(function(){ 
 $("#registe").validate({ 
 //定义验证规则,其中属性名为表单的name属性 
 rules:{ 
 username:{ 
 required:true, 
 onlyLetterAndDigit:true,//使用自定义方法限制只能输入字母或数字 
 rangelength:[4,20], 
 remote:"registe!validName.action"//使用AJAX异步校验 
 }, 
 password:{ 
 required:true, 
 rangelength:[4,20] 
 }, 
 chkpassword:{ 
 required:true, 
 equalTo:"#password" 
  }, 
 email:{ 
 required:true, 
 email:true 
  }, 
 vercode:"required" 
 }, 
 messages:{ 
 username:{ 
 required:"请输入用户名", 
 rangelength:"用户名长度必须在4~20位之间", 
 remote:$.format("用户名{0}已存在,请重新输入!") 
 }, 
 password:{ 
 required:"请输入密码", 
 rangelength:"密码长度必须在4~20位之间" 
 }, 
 chkpassword:{ 
 required:"请再次输入密码", 
 equalTo:"密码输入不一致,请重新输入" 
  }, 
 email:{ 
 required:"请输入电子邮件", 
 email:"请输入合法的电子邮件" 
  }, 
 vercode:{ 
 required:"请输入验证码" 
  } 
 } 
 }); 
}); 
 
//刷新验证码 
function refresh() 
{ 
$("#authImg").src="authImg?now="+new Date(); 
} 
// --></mce:script> 
</head> 
<body> 
<form action="registe.action" method="post" id="registe"> 
<table> 
 <caption><h2>用户注册</h2></caption> 
 <tr> 
 <td>用 户 名:</td><td><input type="text" name="username" id="username"/></td> 
 </tr> 
 <tr> 
 <td>密 码:</td><td><input type="text" name="password" id="password"/> </td> 
 </tr> 
 <tr> 
 <td>确认密码:</td><td><input type="text" name="chkpassword"/></td> 
 </tr> 
 <tr> 
 <td>Email:</td><td><input type="text" name="email"/></td> 
 </tr> 
 <tr> 
 <td>验证码:</td><td valign="bottom"><input type="text" name="vercode" size="10"/> <img alt="" src="authImg" mce_src="authImg" id="authImg" align="absmiddle"><a href="#" mce_href="#" onclick="refresh()"><span style="font-size:12px" mce_style="font-size:12px">刷新验证码</span></a></td> 
 </tr> 
 <tr> 
 <td colspan="2"><input type="submit" value="提交"/><input type="reset" value="重填"/></td> 
 </tr> 
</table> 
</form> 
</body> 
</html>

后台RegisteAction.java的主要方法

public String execute() throws Exception { 
 Map session = ActionContext.getContext().getSession(); 
 String ver2 = (String) session.get("rand"); 
 session.put("rand", null); 
 //判断验证码是否正确 
 if (vercode.equals(ver2)) { 
 if (userManager.validName(username)) { 
 if (userManager.addUser(username, password, email) > 0) 
 return SUCCESS; 
 else 
 addActionError("注册失败,请重试!"); 
 } else { 
 addActionError("该用户名已存在,请重新输入!"); 
 } 
 } else { 
 addActionError("验证码不匹配,请重新输入"); 
 } 
 return INPUT; 
 
} 
 
//验证用户名是否可用 
public String validName() throws Exception { 
 System.out.println(username); 
 boolean flag = userManager.validName(username); 
 HttpServletResponse response = ServletActionContext.getResponse(); 
 response.setDateHeader("Expires", 0); 
 response.addHeader("Pragma", "no-cache"); 
 response.setHeader("Cache-Control", "no-cache"); 
 response.setContentType("text/plain;charset=UTF-8"); 
 if (flag) 
 response.getWriter().write("true"); 
 else 
 response.getWriter().write("false"); 
 response.getWriter().flush(); 
 // 因为直接输出内容而不经过jsp,因此返回null. 
 return null; 
}

效果图如下:

JQuery validate插件验证用户注册信息

注意:使用remote异步验证用户名的方法应该通过response.getWriter().write("true")来输出,而不能像普通方法一样返回字符串。

关于插件更详细的介绍可以查看“jQuery validate验证插件使用详解”。

另外,jQuery也支持动态给控件添加校验,例如:

("#email").rules("add", { required: true, email: true }); 

但要注意:如果对集合中的元素动态添加校验需要循环对每个元素添加,这是因为jQuery隐式实现了集合操作,但validate插件没有。例如:
$(".quantity").each(function(){ 
 $(this).rules("add",{digits:true,required:true}); 
});

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
用jquery写的菜单从左往右滑动出现
Apr 11 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
使用Node.js写一个代码生成器的方法步骤
May 10 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 Javascript
JavaScript实例 ODO List分析
Jan 22 Javascript
jQuery validate验证插件使用详解
May 11 #Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 #Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 #Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 #Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 #Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 #Javascript
使用JavaScript实现ajax的实例代码
May 11 #Javascript
You might like
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
jQuery each()方法的使用方法
2010/03/18 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
详解python中的json的基本使用方法
2016/12/21 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
Numpy之random函数使用学习
2019/01/29 Python
详解Python3 pickle模块用法
2019/09/16 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
中文专业毕业生自荐书范文
2014/01/04 职场文书
承诺书格式
2014/06/03 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
2015年清明节活动总结
2015/02/09 职场文书
英语导游词
2015/02/13 职场文书
python 实现的截屏工具
2021/05/08 Python
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
Golang中channel的原理解读(推荐)
2021/10/16 Golang