JQuery框架

来源：互联网发布：军事武器数据库编辑：程序博客网时间：2024/06/08 10:16

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中。

<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>

^[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} 的值")

0 0

JQuery框架

JQuery框架编辑

JQuery框架
编辑