由于最近在开发一个网站，需要进行表单验证。以往都是用js进行验证。虽然简单，但是代码多，不方便，无法实现高效率的开发。因为在网上找到了一款很方便高效的js验证框架：ValidForm。有关ValidForm的更多介绍，可前往官网：http://validform.rjboy.cn/详细查看。
使用步骤：
1：导入包
所需的包，可前往这里进行下载：下载ValidForm文件：http://validform.rjboy.cn/download.html
2：写javascript代码
<script type="text/javascript">
$(function(){
//$(".registerform").Validform(); //就这一行代码！;
$(".registerform").Validform({
tiptype:function(msg,o,cssctl){
//msg：提示信息;
//o:{obj:*,type:*,curform:*}, obj指向的是当前验证的表单元素（或表单对象），type指示提示的状态，值为1、2、3、4， 1：正在检测/提交数据，2：通过验证，3：验证失败，4：提示ignore状态, curform为当前form对象;
//cssctl:内置的提示信息样式控制函数，该函数需传入两个参数：显示提示信息的对象 和 当前提示的状态（既形参o中的type）;
if(!o.obj.is("form")){//验证表单元素时o.obj为该表单元素，全部验证通过提交表单时o.obj为该表单对象;
var objtip=o.obj.siblings(".Validform_checktip");
cssctl(objtip,o.type);
objtip.text(msg);
}
}
});
})
</script><input type="text" value="" name="account" class="inputxt" datatype="s4-16" nullmsg="请输入账号！" ajaxurl="<%=request.getContextPath()%>/front/user/checkUser.do" sucmsg="账号可以使用" errormsg="4~20位字符，可由英文、数字以及"_"、"-"组成" />4：使用ajaxurl，进行实时验证用户名是否存在
<input type="text" value="" name="account" class="inputxt" datatype="s4-16" nullmsg="请输入账号！" <span style="color:#ff0000;"><strong>ajaxurl="front/user/checkUser.do"</strong></span> sucmsg="账号可以使用" errormsg="4~20位字符，可由英文、数字以及"_"、"-"组成" />checkUser.do控制器的部分代码如下：
/**
* 检查注册账号是否存在
*
* @param name
*<span style="color:#ff6666;"><strong> 表单中的文本框的name属性
* @param param
* 表单中对应name属性的文本框的值</strong></span>
* @return
*/
@RequestMapping("/checkUser")
@ResponseBody
public Map<String,Object> checkUser( String name,String param, HttpServletRequest request){
Map<String,Object> map=new HashMap<String,Object>();
List<AgencyEntity> agencyList=agencyService.findByProperty(AgencyEntity.class, "account", param);
if(agencyList.size()!=0){
map.put("status", "n");
map.put("info","账号已经存在！" );
}else{
map.put("status", "y");
map.put("info", "账号可以使用！");
}
return map;
}checkUser.do控制器返回的是 json数据（采用@ResponseBody，返回值为Map就可以实现）：json的格式必须为：{"status":"y","info""put the info"}.
其中：“status”：y：表示验证成功。n：表示验证不成功。“info”：前台输出的信息。
这样就可以实现验证用户名是否存在了。
前台页面效果图如下：
以下是完整的注册页面jsp代码：
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/header.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/register.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/validation.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/Validform_v5.3.2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户注册</title>
<script type="text/javascript">
$(function(){
//$(".registerform").Validform(); //就这一行代码！;
$(".registerform").Validform({
tiptype:function(msg,o,cssctl){
//msg：提示信息;
//o:{obj:*,type:*,curform:*}, obj指向的是当前验证的表单元素（或表单对象），type指示提示的状态，值为1、2、3、4， 1：正在检测/提交数据，2：通过验证，3：验证失败，4：提示ignore状态, curform为当前form对象;
//cssctl:内置的提示信息样式控制函数，该函数需传入两个参数：显示提示信息的对象 和 当前提示的状态（既形参o中的type）;
if(!o.obj.is("form")){//验证表单元素时o.obj为该表单元素，全部验证通过提交表单时o.obj为该表单对象;
var objtip=o.obj.siblings(".Validform_checktip");
cssctl(objtip,o.type);
objtip.text(msg);
}
}
});
})
</script>
</head>
<body>
<div id="container">
<jsp:include page="header.jsp" flush="true"/>
<div id="pageBody">
<div id="reg_title">
新用户注册
</div>
<form class="registerform" action="<%=request.getContextPath()%>/front/user/save.do">
<div class="info">
<span>个人资料</span>
<div class="info_form">
<div class="a_form">
<div class="form_label">账户名</div>
<input type="text" value="" name="account" class="inputxt" datatype="s4-16" nullmsg="请输入账号！" ajaxurl="<%=request.getContextPath()%>/front/user/checkUser.do" sucmsg="账号可以使用" errormsg="4~20位字符，可由英文、数字以及"_"、"-"组成" />
<div class="Validform_checktip"><span>*</span>4~20位字符，可由中文、英文、数字以及"_"、"-"组成</div>
</div>
<div class="a_form">
<div class="form_label">设置密码</div>
<input type="password" name="pwd" id="pwd" class="inputxt" datatype="*6-20" nullmsg="请输入密码" errormsg="6~20位字符，可由字母、数字或符号组成" />
<div class="Validform_checktip"><span>*</span>6~20位字符，可由字母、数字或符号组成</div>
</div>
<div class="a_form">
<div class="form_label">确认密码</div>
<input type="password" name="repwd" id="repwd" class="inputxt" datatype="*" recheck="pwd" errormsg="两次密码不一样！"/>
<div class="Validform_checktip"><span>*</span>请再次输入密码</div>
</div>
<div class="a_form">
<div class="form_label">姓名</div>
<input type="text" name="name" id="name" class="inputxt" datatype="s" nullmsg="请填写姓名" errormsg="请填写正确的姓名"/>
<div class="Validform_checktip"><span>*</span></div>
</div>
<div class="a_form">
<div class="form_label">手机</div>
<input type="text" name="mobile" id="moblie" class="inputxt" datatype="m" nullmsg="请填写手机" errormsg="请填写正确的手机号码！" />
<div class="Validform_checktip"><span>*</span>请输入11为手机号码</div>
</div>
<div class="a_form">
<div class="form_label">邮箱</div>
<input type="text" name="email" id="email" class="inputxt" datatype="e" nullmsg="请填写邮箱" errormsg="邮箱格式不对，请重新输入" />
<div class="Validform_checktip"><span>*</span>请输入常用邮箱，将来用来找回密码、接受订单通知等</div>
</div>
</div>
</div><!-- end info -->
<div class="info">
<span>公司资料</span>
<div class="info_form">
<div class="a_form">
<div class="form_label">公司全称</div>
<input type="text" name="companyName" id="companyName" class="inputxt" ajaxurl="<%=request.getContextPath()%>/front/user/checkCompany.do" datatype="s" nullmsg="请填写公司全称" errormsg="请输入正确的公司名称"/>
<div class="Validform_checktip"><span>*</span></div>
</div>
<div class="a_form">
<div class="form_label">法人代表</div>
<input type="text" name="" value="" />
<div class="Validform_checktip"><span>*</span></div>
</div>
<div class="a_form">
<div class="form_label">公司地址</div>
<input type="text" name="address" id="address" class="inputxt" datatype="s" nullmsg="请填写公司地址" errormsg="请填写正确的公司地址"/>
<div class="Validform_checktip"><span>*</span></div>
</div>
<div class="a_form">
<div class="form_label">公司电话</div>
<input type="text" name="telephone" id="address" class="inputxt" datatype="n" nullmsg="请填写公司电话" errormsg="请填写正确的公司电话"/>
<div class="Validform_checktip"><span>*</span></div>
</div>
</div>
</div><!-- end info -->
<div class="info">
<div class="info_form">
<div class="a_form">
<div class="form_label">验证码</div>
<div class="form_input"><input type="text" name="" value="" size="4" /><img src="<%=request.getContextPath()%>/images/header/yzm.png" />看不清？<a href="#">换一张</a></div>
<div class="Validform_checktip">请输入图片中的字符，不区分大小写</div>
</div>
</div>
<div id="sub"><input type="submit" value="注册" /></div>
</div><!-- end info -->
</form>
</div>
</div>
</body>
</html>
610
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
