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 相关文章推荐
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
javascript学习笔记(八) js内置对象
Jun 19 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
window.location和document.location的区别分析
2008/12/23 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
Python对文件操作知识汇总
2016/05/15 Python
你应该知道的python列表去重方法
2017/01/17 Python
python验证码识别的示例代码
2017/09/21 Python
python 获取字符串MD5值方法
2018/05/29 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
Python中一般处理中文的几种方法
2019/03/06 Python
eclipse创建python项目步骤详解
2019/05/10 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
四种会话跟踪技术
2015/05/20 面试题
怎样有效的进行自我评价
2013/10/06 职场文书
班组长工作职责
2013/12/25 职场文书
园林资料员岗位职责
2013/12/30 职场文书
美德好少年事迹材料
2014/01/19 职场文书
五年级数学教学反思
2014/02/11 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
珍惜资源的建议书
2014/08/26 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
爱国之歌(8首)
2019/09/29 职场文书
Python使用永中文档转换服务
2022/05/06 Python