使用ValidForm进行表单验证，结合SpringMVC检验用户名是否存在

来源：互联网发布：tf idf算法java实现编辑：程序博客网时间：2024/06/04 19:17

由于最近在开发一个网站，需要进行表单验证。以往都是用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")@ResponseBodypublic 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>

0 0