由于最近在开发一个网站,需要进行表单验证。以往都是用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>
3:给需要验证的表单元素绑定附件的属性:
<input type="text" value="" name="account" class="inputxt" datatype="s4-16" nullmsg="请输入账号!" ajaxurl="<%=request.getContextPath()%>/front/user/checkUser.do" sucmsg="账号可以使用" errormsg="4~20位字符,可由英文、数字以及"_"、"-"组成" />
更多的属性请见官方帮助文档:
ValidForm帮助文档
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位字符,可由英文、数字以及"_"、"-"组成" />
ajaxurl:填写控制器的地址
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>