“JQuery框架”的意思、由来-中文百科全书

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

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

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

对前台注册页面register.ftl进行表单验证，当符合基本验证规则后，再通过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位字母、数字或字符组合，首字母必须为字母。</li>

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

<@s.password name="user.password" id="userPassword" class="item_input" size="30" maxlength="16" onblur="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包，且结果集类型为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>

词条	JQuery框架
释义	对前台注册页面register.ftl进行表单验证，当符合基本验证规则后，再通过JQuery formvalidator Ajax将数据传到action中，然后与数据库中存储的数据进行对比，并将结果返回到客户端，从而达到对用户名和邮箱进行实时验证是否已注册过。由于项目的需要，最近一段时间在学习JQuery，从中发现了一款比较好使的基于JQuery的formValidator表单验证框架，下面将项目中用到的一个Ajax实时校验与大家分享一下。由于项目用的是SSH框架，又用到了Freemarker模板页面，数据库是Mysql5.0，主要内容如下所示： 1. 注册页面，用Freemarker所写，这里使用了JQuery的一个表单验证框架formvalidator：对前台注册页面register.ftl进行表单验证，当符合基本验证规则后，再通过JQuery formvalidator Ajax将数据传到action中。 register.ftl： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>会员注册</title> <link href="${base}/forum/css/pass.css" rel="stylesheet" type="text/css"> <link href="${base}/css/validator.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="<@s.url value='/js/showError.js'/>"></script> <script type="text/javascript" src="<@s.url value='/js/jquery-1.3.2.min.js'/>"></script> <script type="text/javascript" src="${base}/js/formValidator.js" charset="UTF-8"></script> <script type="text/javascript" src="${base}/js/formValidatorRegex.js" charset="UTF-8"></script> <!—下面的JS代码是，实时验证用户名或注册邮箱是否存在 --> <script type="text/javascript"> $(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> <div id="passmain"> <div class="passbottom"> <div class="pbleftb"> <h3 style="text-align:center;">新用户注册</h3> <p class="p2t">带号的项目为必选项, 请全部填写</p> <ul class="p2ul"> <@s.form action="register" method="POST" theme="simple" id="form1" name="form1"> <@s.token name="token"/> <li class="p2li"> <div class="p2left">用户登录昵称<span style="color:#FF0000;"> </span></div> <div class="p2right"><@s.textfield name="user.username" id="username" class="item_input" size="30" maxlenght="20" required="true" onblur="checkUser();" /> </div> <div class="p2center"><div id="usernameTip"/> </div> </li><br> <li class="p2li"> <div class="p2left">性别<span style="color:#FF0000;">* </span></div> <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> <li class="p2li"> <div class="p2left">Email地址<span style="color:#FF0000;">* </span></div> <div class="p2right"><@s.textfield name="user.email" id="email" class="item_input" size="30" onblur="checkEmali();" required="true"/> </div> <div class="p2center"><div id="emailTip"></div></div> </li><br> <li class="p1t">5-20位字母、数字或字符组合，首字母必须为字母。</li> <li class="p1t">为了您的帐户安全，强烈建议您的密码使用字符+数字+特殊字符方式，并且密码长度大于8位。</li> <li class="p2li"> <div class="p2left">密码<span style="color:#FF0000;">* </span></div> <div class="p2right"> <@s.password name="user.password" id="userPassword" class="item_input" size="30" maxlength="16" onblur="checkPassword();" required="true"/> </div> <div class="p2center"><div id="divHintPassword" style="display:none;"></div> </div> </li><br> <li class="p2li"> <div class="p2left">重复输入密码<span style="color:#FF0000;">* </span></div> <div class="p2right"><@s.password name="verifyPassword" id="verifyPassword" class="item_input" size="30" maxlength="16" onblur="validatePassword();" required="true"/></div> <div class="p2center"> <div id="divHintverifyPassword" style="display:none;"></div> </div> </li><br> <br> <li class="p2li"> <div class="p2left">输入校验码<span style="color:#FF0000;"></span> </div> <div class="p2right"><@s.textfield name="validationCode" class="item_input" size="10" required="true"/> </div> </li> <li class="p2li"> <div class="p2left">校验码<span style="color:#FF0000;"></span> </div> <div class="p2right"><img src="<@s.url value='/vcode.jpg'/>" align='absmiddle' border='0'/></div> </li> <li class="p1t"><input name="提交" type="submit" value="注册用户" /> </li> </ul> </div> </@s.form> </div> </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包，且结果集类型为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"> <struts> <package name="userAjax" extends="json-default" namespace="/user/ajax"> <action name="userCheck" class="com.qiuyanluocheng.action.UserAjaxAction"> <!—返回结果类型必须为json --> <result name="ajax" type="json"></result> </action> </package> </struts>
随便看	方先友方仙来方咸松方贤方贤桂方贤益方贤友方显仓方显军方显启方显廷回忆录：一位中国经济学家的七十自述方显廷文集方险峰方献科方腺景天方宪法方限方线珠方香肠炒花菜方箱方筒方箱型燃煤导热油锅炉方湘侠方祥方祥端方祥兰