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

使用框架的生效插件做客户端验证非常方便，下面做一个使用生效插件验证用户注册信息的例子。

本实例使用的是1.5版本。

示例是在嘘下做的，代码如下：

registe.jsp

% @ page语言=' Java ' ContentType=' text/html；charset=UTF-8 '页面编码=' UTF-8 ' %！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML头元http-equiv=' Content-Type ' Content=' text/HTML；charset=UTF-8 '标题注册页面/title MCE :脚本类型=' text/JavaScript ' src=' http : js/jquery。1 .4 .2 .js ' MCE _ src=' http : js/jquery。1 .4 .2 .js '/MCE :脚本MCE :脚本类型=' text/JavaScript ' src=' http : js/validate/jquery。验证。js ' MCE _ src='- //扩展验证器的校验方法$ .验证器。addmethod(' only letteranddigit '，function(value，element，params){ var regex=new regexp('^[0-9a-za-z]$ ')；返回regex.test(值);},'只能输入字母或数字');$(function(){ $(“# register”)).验证({ //定义验证规则，其中属性名为表单的名字属性规则： {用户名： {必填项d : rue，只有字母和数字： rue，//使用自定义方法限制只能输入字母或数字rangelength:[4，20]，remote: ' registe！validName.action'//使用创建交互式、快速动态网页应用的网页开发技术异步校验}，密码： {必需d : true，rangelength:[4，20] }，chkpassword : {必需d : true，equalTo:'#password' }，电子邮件： {必需d : true，email:true }，vercode: '必需' }，消息3: {用户名3: {必需d 33: }请输入用户名，范围长度： '用户名长度必须在4~20位之间，remote:美元.格式('用户名{0}已存在，请重新输入！)}，password: { required: '请输入密码，范围长度： '密码长度必须在4~20位之间}，chkpassword : {必需的d : '请再次输入密码，等于： '密码输入不一致，请重新输入}，email:{ required: '请输入电子邮件，email: '请输入合法的电子邮件}，vercode:{ required: '请输入验证码' } } });});//刷新验证码函数refresh() { $('#authImg ').src='http:authImg？now=' new Date()；}/////MCE :脚本/头体形式动作=' register。“行动”方法=' post ' id=' registe '表标题2用户注册/H2/标题tr td用户名：/TDT输入类型=' text '名称=' username ' id=' username '/TD/tr tr TD密码：/TDT输入类型=' text ' name=' password ' id=' password '/TD/tr TD确认密码：/TDT输入类型=' text ' name=' chkpassword '/TD/tr tdEmail:/TDT输入类型=' text ' name=' email '/TD/tr TD验证码：/tdtd valgn=“底部”输入类型=text ' name=' vercode ' size=' 10 '/img alt=' src=' http : authImg ' MCE _ src=' http : authImg ' id=' authImg ' align=' absmall ' a href=' # ' MCE _ href=' # ' onclick=' refresh()' span style=' font-size 336012 px ' MCE _ style=' font-size刷新验证码/span/a/TD/tr TD栏=' 2 '输入类型='提交'值='提交/input type='reset' value='重填//td /tr /table /form /body /html后台RegisteAction.java的主要方法

公共字符串执行()引发异常{映射会话=ActionContext.getContext().getSession()；字符串版本2=(字符串)会话。get(' rand ')；session.put('rand '，null)；//判断验证码是否正确if(ver代码。等于(版本2)){如果(用户管理器。有效名称(用户名)){ if(用户管理器。添加用户(用户名。密码、电子邮件)0)返回成功否则添加操作错误('注册失败，请重试!');} else { addActionError('该用户名已存在，请重新输入!');} } else { addActionError('验证码不匹配，请重新输入');}返回输入} //验证用户名是否可用公共字符串validName()引发异常{ System.out.println(用户名);布尔标志=userManager.validName(用户名);HttpServletResponse响应=servletactioncontext。getresponse()；回应。setdateheader(' Expires '，0)；response.addHeader('Pragma '，'无缓存');response.setHeader('缓存控制','无缓存');回应。setcontenttype(' text/plain；字符集=UTF-8 '；if (flag) response.getWriter().write(' true ')；else response.getWriter().write(' false ')；response.getWriter().flush()；//因为直接输出内容而不经过jsp，因此返回零.返回null}效果图如下：

注意：使用遥远的异步验证用户名的方法应该通过response.getWriter().写("真")来输出，而不能像普通方法一样返回字符串。

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

另外，jQuery也支持动态给控件添加校验，例如：复制代码代码如下：('#email ').规则(' add '，{ required: true，email : true })；但要注意：如果对集合中的元素动态添加校验需要循环对每个元素添加，这是因为框架隐式实现了集合操作，但生效插件没有。例如：

$('.数量')。每个（函数(){ $(此)).规则(' add '，{digits:true，必选d : true })；});以上就是本文的全部内容，希望对大家的学习有所帮助。