使用ValidForm進行表單驗證,結合SpringMVC檢驗使用者名稱是否存在
阿新 • • 發佈:2019-01-10
由於最近在開發一個網站,需要進行表單驗證。以往都是用js進行驗證。雖然簡單,但是程式碼多,不方便,無法實現高效率的開發。因為在網上找到了一款很方便高效的js驗證框架:ValidForm。有關ValidForm的更多介紹,可前往官網:http://validform.rjboy.cn/詳細檢視。
使用步驟:
1:匯入包
2:寫javascript程式碼
3:給需要驗證的表單元素繫結附件的屬性:<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位字元,可由英文、數字以及"_"、"-"組成" />
更多的屬性請見官方幫助文件:ValidForm幫助文件
4:使用ajaxurl,進行實時驗證使用者名稱是否存在
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>