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 相关文章推荐
再谈ie和firefox下的document.all属性
Oct 21 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
JQuery学习总结【一】
Dec 01 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
Node.js使用Angular简单示例
May 11 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
小程序中手机号识别的示例
Dec 14 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
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
如何选择适合你的JavaScript框架
2017/11/20 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
使用Python抓取模板之家的CSS模板
2015/03/16 Python
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
python实现人脸识别代码
2017/11/08 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
最新销售员个人自荐信
2013/09/21 职场文书
《威尼斯的小艇》教学反思
2014/02/17 职场文书
2014年除四害工作总结
2014/12/06 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
李强感恩观后感
2015/06/17 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫