JQuery框架

太过爱你忘了你带给我的痛 2022-08-25 14:50 193阅读 0赞

# JQuery框架  编辑 #

对前台注册页面register.ftl进行 [表单][Link 1]验证，当符合基本验证规则后，再通过JQuery formvalidator Ajax将数据传到action中，然后与数据库中 [存储][Link 2]的数据进行对比，并将结果返回到客户端，从而达到对用户名和邮箱进行实时验证是否已注册过。

由于项目的需要，最近一段时间在学习JQuery，从中发现了一款比较好使的基于JQuery的formValidator [表单][Link 1]验证框架，下面将项目中用到的一个Ajax实时校验与大家分享一下。

由于项目用的是SSH框架，又用到了Freemarker模板页面，数据库是Mysql5.0，主要内容如下所示：

**1. 注册页面，用Freemarker所写，这里使用了JQuery的一个[表单][Link 1]验证框架formvalidator：**

对前台注册页面register.ftl进行 [表单][Link 1]验证，当符合基本验证规则后，再通过JQuery formvalidator Ajax将数据传到action中。

<html>

<head>

<!—下面的JS代码是，实时验证用户名或注册邮箱是否存在 -->

$(document).ready(function()\{

$.formValidator.initConfig(\{formid:"form1",onerror:function(msg)\{\},onsuccess:function()\{return true;\}\});

$("\#username")

.formValidator(\{onshow:"请输入用户名",onfocus:"请您记住填写的用户名，以后登录时需要用到！",oncorrect:"该用户名可以注 册"\})

.inputValidator(\{min:4,max:15,onerror:"用户名长度不能小于4个字符"\})

.ajaxValidator(\{

type : "get",

datatype: "json",

data: "username:"+$("\#username").val(),

url : "$\{base\}/user/ajax/userCheck!checkUser.action",

success : function(data)\{if(data.userExist)\{return false;\}else\{return true;\}\},

buttons: $("\#button"),

error: function()\{alert("服务器没有返回数据，可能服务器忙，请重试");\},

onerror : "该用户名已经存在，请更换用户名",

onwait : "正在对用户名进行合法性校验，请稍候…"

\});

$("\#email")

.formValidator(\{onshow:"请输入邮箱",onfocus:"邮箱6-100个字符,请正确输入",oncorrect:"恭喜你,邮箱可以注册",forcevalid:true\})

.inputValidator(\{min:6,max:100,onerror:"你输入的邮箱长度非法,请确认"\})

.regexValidator(\{regexp:"^(\[\\\\w-.\]+)@((\[\[0-9\]\{1,3\}.\[0-9\]\{1,3\}.\[0-9\]\{1,3\}.)|((\[\\\\w-\]+.)+))(\[a-zA-Z\]\{2,4\}|\[0-9\]\{1,3\})(\]?)$",onerror:"你输入的邮箱格式不正确"\})

.ajaxValidator(\{

type : "get",

datatype: "json",

data: "email:"+$("\#email").val(),

url : "$\{base\}/user/ajax/userCheck!checkUser.action",

success : function(data)\{if(data.emailExist)\{return false;\}else\{return true;\}\},

buttons: $("\#button"),

error: function()\{alert("服务器没有返回数据，可能服务器忙，请重试");\},

onerror : "该邮箱已经存在，请更换邮箱",

onwait : "正在对邮箱进行校验，请稍候…"

\});

</script>

</head>

<body>

<h3 style="text-align:center;">新用户注册</h3>

<p class="p2t">带\*号的项目为必选项, 请全部填写</p>

<@s.form action="register" method="POST" theme="simple" id="form1" name="form1">

<@s.token name="token"/>

<div class="p2left">用户登录昵称<span style="color:\#FF0000;">\* </span></div>

</div>

</div>

</li><br>

<div class="p2right"><@s.radio

name="user.gender"

list=\{action.getText('user.gender.male'):action.getText("user.gender.male"),action.getText('user.gender.female'):action.getText("user.gender.female")\}

size="30"/></div>

</li><br>

<li class="p1t">注意：邮箱必须是可以收到程序员之家激活码的。</li>

<li class="p1t">用户注册后，需要激活，才可以使用！激活码只会发到您注册邮箱中。</li>

<div class="p2left">Email地址<span style="color:\#FF0000;">\* </span></div>

</div>

</li><br>

<li class="p1t">5-20位字母、数字或 [字符][Link 3]组合，首字母必须为字母。</li>

<li class="p1t">为了您的帐户安全，强烈建议您的密码使用 [字符][Link 3]\+数字+特殊字符方式，并且密码长度大于8位。</li>

<@s.password name="user.password" id="userPassword" class="item\_input" size="30" maxlength="16" οnblur="checkPassword();" required="true"/>

</div>

</div>

</li><br>

<div class="p2left">重复输入密码<span style="color:\#FF0000;">\* </span></div>

</div>

</li><br>

<br>

<div class="p2left">输入校验码<span style="color:\#FF0000;">\*</span> </div>

</div>

</li>

<div class="p2right"><img src="<@s.url value='/vcode.jpg'/>" align='absmiddle' border='0'/></div>

</li>

</li>

</ul>

</div>

</@s.form>

</div>

</body>

</html>

**2．后台Action类，UserAjaxAction.java:**

**基于Hibernate与数据库进行交互验证用户名和邮箱是否存在，同时返回的数据格式为JSon类型的。**

**package** com.qiuyanluocheng.action;

**import** IO.IOException;

**import** com.googlecode.jsonplugin.annotations.JSON;

/\*\*

\* **@author** qiuyanluocheng

\*/

**public class** UserAjaxAction **extends** BaseAction

/\*\*

\* BaseAction是自己封装的

\*/

**private static final long** *serialVersionUID* = 1L;

**private** String username;// 用户名

**private** String email;// 邮箱

**private boolean** userExist;

**private boolean** emailExist;

// 表示返回的Json数据中不含此属性

@JSON(serialize= **false**)

**public** String getUsername()

**return** username;

**public void** setUsername(String username)

**this**.username = username;

**public** String getEmail()

**return** email;

**public void** setEmail(String email)

**this**.email = email;

**public boolean** isUserExist()

**return** userExist;

**public void** setUserExist( **boolean** userExist)

**this**.userExist = userExist;

**public boolean** isEmailExist()

**return** emailExist;

**public void** setEmailExist( **boolean** emailExist)

**this**.emailExist = emailExist;

// 检查用户是否存在

**public** String checkUser() **throws** IOException

**if**(username != **null**)\{

**if**( **this**.getUserService().isUsernameExist(username))\{

// System.out.println("用户存在！！！！！"+username);

userExist = **true**;

\} **else**\{

// System.out.println("用户不存在！！！！！"+username);

userExist = **false**;

**if**(email != **null**)\{

**if**( **this**.getUserService().isEmailExist(email))\{

// System.out.println("邮箱存在！！！！！"+email);

emailExist = **true**;

\} **else**\{

// System.out.println("邮箱不存在！！！！！"+email);

emailExist = **false**;

**return** "ajax";

注意需要导入jsonplugin-0.34.jar包。

3. 配置文件struts.xml：

配置action，并且注意package要继承json-default包，且 [结果集][Link 4]类型为json。

<?xml version= *"1.0"* encoding= *"utf-8"*?>

<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "dtds/struts-2.0.dtd">

<!—返回结果类型必须为json -->

</action>

</package>

</struts>

**\[1\]**

jQuery框架中增加对输入框的验证，在设计页面表单时，常常因为需要写大量的验证信息，还要写复杂的正则表达式，现在这样一个验证框架可以解决这样的繁杂问题。这样jquery.validate.js就诞生了，jquery.validate.js是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法，并且对国际化也有很好的支持 。

validate自带的默认验证

required: "必选字段",

remote: "请修正该字段",

email: "请输入正确格式的电子邮件",

url: "请输入合法的网址",

date: "请输入合法的日期",

dateISO: "请输入合法的日期 (ISO).",

number: "请输入合法的数字",

digits: "只能输入整数",

creditcard: "请输入合法的信用卡号",

equalTo: "请再次输入相同的值",

accept: "请输入拥有合法后缀名的字符串",

maxlength: jQuery.format("请输入一个长度最多是 \{0\} 的字符串"),

minlength: jQuery.format("请输入一个长度最少是 \{0\} 的字符串"),

rangelength: jQuery.format("请输入一个长度介于 \{0\} 和 \{1\} 之间的字符串"),

range: jQuery.format("请输入一个介于 \{0\} 和 \{1\} 之间的值"),

max: jQuery.format("请输入一个最大为 \{0\} 的值"),

min: jQuery.format("请输入一个最小为 \{0\} 的值")

[Link 1]: http://baike.baidu.com/view/296684.htm
[Link 2]: http://baike.baidu.com/view/87682.htm
[Link 3]: http://baike.baidu.com/view/263416.htm
[Link 4]: http://baike.baidu.com/view/691831.htm