使用ValidForm進行表單驗證，結合SpringMVC檢驗使用者名稱是否存在

阿新 • • 發佈：2019-01-10

由於最近在開發一個網站，需要進行表單驗證。以往都是用js進行驗證。雖然簡單，但是程式碼多，不方便，無法實現高效率的開發。因為在網上找到了一款很方便高效的js驗證框架：ValidForm。有關ValidForm的更多介紹，可前往官網：http://validform.rjboy.cn/詳細檢視。

使用步驟：

1：匯入包

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>

使用ValidForm進行表單驗證，結合SpringMVC檢驗使用者名稱是否存在

使用ValidForm進行表單驗證，結合SpringMVC檢驗使用者名稱是否存在

使用validate進行表單驗證，實現ajax非同步驗證

jQuery基礎（常用插件表單驗證，圖片放大鏡，自定義對象級，jQuery UI，面板折疊）

表單驗證，與多語言支持，CI

layer,Jquery,validate實現表單驗證，刷新頁面，關閉子頁面

使用 WTForms 進行表單驗證的例子

vue2移動端使用vee-validate進行表單驗證

使用純JQuery 進行表單驗證

表單驗證，onfocus，onblur事件

使用bootstarp來進行表單驗證

django form表單驗證，使用Ajax提交併返回提示資訊（JSON傳遞資料）

Spring MVC框架在進行表單提交，自動封裝成物件提交，在以物件的形式入參

使用FormValidation進行表單驗證

Element 表單驗證，取消部分表單欄位校驗結果

Python Flask，Flask-WTF，表單驗證，CSRF驗證

使用jquery validate和ajax進行表單驗證並向後臺提交資料

表單驗證外掛 validate （基本表單驗證，自定義驗證規則）

利用js編寫一個簡單的html表單驗證，驗證通過時提交資料(附原始碼)

使用easyUI中的jquery.validate.min.js外掛進行表單驗證並自定義校驗規則

Laravel表單驗證，攔截ajax，自定義返回資料

使用ValidForm進行表單驗證，結合SpringMVC檢驗使用者名稱是否存在

相關推薦