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

2024-08-20 10:45:30

使用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;
}

效果图如下：

注意：使用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});
});

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

jQuery验证插件validate使用方法详解

1. 写在前面我们知道,用户在注册的时候,会有个表单页面,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在用户提交之前进行验证才行,如果不符合要求,需要在右边显示一个友好的提示,让用户修改. 记得以前在学习Servlet的时候,实现一个简单的用户注册功能的验证是在后台做的,有些用了正则表达式,有些没用,但是都比较简单.流程是这样的,前台提交表单数据后,servlet获取数据先进行验证,如果不符合要求,将提示信息放到一个List中,然后再把List存到session中,跳转到一个新的页
CKEditor无法验证的解决方案（js验证+jQuery Validate验证）

最近项目的前端使用了jQuery,表单的前端验证用的是jQuery Validate,用起来很简单方便,一直都很满意的. 前段时间,根据需求为表单中的 textarea 类型的元素加上了html富文本编辑器,用的是CKEditor,功能强大,定制方便,也很满意. 不过用CKEditor增强过的 textarea 元素,这个字段要求是非空的,在jQuery Validate总是验证不通过,原因就是在 CKEditor 编辑器填写了内容之后,编辑器并不是立即把内容更新到原来的 textarea 元素
jQuery validate插件submitHandler提交导致死循环解决方法

本文实例讲述了jQuery validate插件submitHandler提交导致死循环解决方法.分享给大家供大家参考,具体如下: dom对像的提交form.submit();和jquery对像的提交$('').submit();功能上是没有什么区别的.但是如果用了jquery validate插件,提交时这二个就区别大了.$('').submit();提交时,jquery validate会进行验证,submitHandler里面如果写了$('').submit();会导致死循环,而form.
jquery.validate提示错误信息位置方法

本文实例讲述了jquery.validate提示错误信息位置方法.分享给大家供大家参考,具体如下: 好长时间没有用jquery.validate.js这个插件了,忘得差不多了.唉,好东西还是要经常拿出来看看的,今天用jquery.validate来做一个小东西,遇到一个问题,就是错误提示信息的位置问题,如果知道的话,很简单.以前遇到过,可是忘了,现在标记一下,将来在忘了,在回过头看看.俗话说的好,好记性不如烂笔头. 举个例子,大家就知道怎么回事了. rules: { name:{ require
jquery validate表单验证插件

对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式. 这3类基本要素中,html表单结构的创建相对简单.表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息.这里我参考了百
深入学习jQuery Validate表单验证（二）

本文实例介绍了jQuery Validate表单验证,分享给大家供大家参考,具体内容如下一.添加一个另外一个插件jquery.validate.messages_cn.js. 改变默认提示方式. /* * Translated default messages for the jQuery validation plugin. * Language: CN * Author: Fayland Lam <fayland at gmail dot com> */ jQuery.extend(jQ
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析

类似的文章已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此.最终效果如下: 后端使用Asp.net mvc5,前端框架有:jquery.validate.jquery.validate.unobtrusive.requirejs.Bootstrap,都是当前最/较新版本.jquery.validate就不用说了,目前比较流行的前端校验组件:jquery.validate.unobtrusive基于jquery.validate,是为了配合Asp.net mvc
jQuery validate+artdialog+jquery form实现弹出表单思路详解

功能描述: 在页面弹出一个form表单,ajax无刷新提交表单,表单需通过验证. 适用范围: 适用于在列表页面新增,修改记录. 需要加载的js文件: jquery.min.js artDialog.js iframeTools.js jquery.form.js jquery.validate.js 实现思路: 在页面中将表单放到一个隐藏的容器中,用artdialog弹出该form并对form加上jqueryvalidate验证,提交采用jqueryform ajax提交,由于都是用现成的插件写
jQuery validate插件实现ajax验证重复的2种方法

本文实例讲述了jQuery validate插件实现ajax验证重复的2种方法.分享给大家供大家参考,具体如下: jquery validate 经过这种多年的改良,已经很完善了.它能满足80%的验证需要,如果validate自带的功能,不能满足我们需求,它提供了addMethod来扩展功能.下面就举个小例子来说明一下addMethod的用法. 完整demo实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//
基于Bootstrap+jQuery.validate实现表单验证

这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤为重要. 用户注册和登录其实往往比我们想象的难.就比如表单校验,里面涵盖的内容其实挺多,就前台而言,你需要了解: 1.正则表达式的基本了解其实正则并不难,并且在学会后能带给你极大的成就感,享受那种事半功倍的效果吧. 2.ajax异步请求在验证用户名是否存在.用户登录时账号或者密码错误时给出相应的

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

相关推荐

随机推荐