表單驗證插件Validform使用筆記

Validform是一款很強大的表單驗證插件，號稱一行代碼搞定整站的表單驗證！

實際使用感受還不錯，比jquery-validate簡單易用。

一、應用Validform，所謂的一句話加驗證。

$(".demoform").Validform();

上面是用的class選取表單對象，demoform就是form使用的class。

用id也行

$("#formid").Validform();

咱們把這稱爲初始化吧，初始化的時候還能夠加參數

$("#form_regis").Validform({
    tiptype:2
});

tiptype設置的是提示信息的樣式，值有一、二、三、4。2是在側邊提示信息，Validform會查找class爲"Validform_checktip"的標籤顯示提示信息。

二、驗證示例

除了上面的一句話初始化，還須要在須要驗證的表單屬性上添加配置

<input type="text" datatype="m" ajaxurl="checkPhone" nullmsg="請填寫手機號">

<input type="text" datatype="n4-4" nullmsg="請填寫手機收到的驗證碼" errormsg="請填寫手機收到的驗證碼">

<input type="password" datatype="s6-16" nullmsg="請設置密碼！" errormsg="爲了安全，密碼要6位以上">

datatype配置驗證類型，*是必填，m是驗證手機號，n是數字，s是字符，n和s後面的數字是限制長度的範圍。

nullmsg是值爲空時的提示信息，errormsg是驗證不經過時的提示信息

ajaxurl是後臺的驗證地址。

在input的側邊還須要加上提示信息的顯示位置，class="Validform_checktip"，雖然不加的話Validform會自動建立（我使用的是最新版5.3.2），可是仍是本身控制樣式比較好。

完整示例

<div class="form-group">
	<label class="col-sm-3 control-label" for="inputEm">密碼：</label>
	<div class="col-sm-5">
		<input type="password" placeholder="" name="pwd" id="pwd" class="form-control" datatype="s6-16" nullmsg="請設置密碼！" errormsg="爲了安全，密碼要6位以上"> 
	</div>
	<div class="col-sm-4">
		<span class="help-block">
			<div class="Validform_checktip">必填項</div>
		</span>
	</div>
</div>

三、修改驗證經過時的提示信息

驗證經過時的提示信息是寫在js裏的，我直接修改了，下面的r就是驗證經過時的提示信息

var e={tit:"提示信息",w:{"*":"不能爲空！","*6-16":"請填寫6到16位任意字符！,"r:"格式符合要求",c:"正在檢測信息…",s:"請{填寫|選擇}{0|信息}！",v:"所填信息沒有通過驗證，請稍後…",p:"正在提交數據…"}

四、修改手機驗證的正則表達式

Validform已經幾年沒有更新了，後來又出了新的手機號碼，好比170號段，因此須要修改下手機驗證的正則表達式，也是直接修改了js

m:/^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|17[0-9]{9}$|18[0-9]{9}$/

五、後臺驗證後的返回格式

/**
	 * 用戶手機校驗
	 */
	@RequestMapping("checkMobile")
	@ResponseBody
	public Map<String, String> checkMobile(HttpServletRequest request){
		String mobile = request.getParameter("param");
		Boolean canUseFlag = loginSerivce.checkMobile(mobile);
		Map<String , String> map = new HashMap<String, String>();  
		if(canUseFlag){
			map.put("info", "該號碼可用");  
		    map.put("status", "y");
		}else{
			map.put("info", "號碼已使用，忘記密碼可找回");  
		    map.put("status", "n");
		}
		return map;
	}

使用上面的格式返回信息給前臺，info的信息會顯示到提示信息上.

request.getParameter("param")取得參數的值，request.getParameter("name")取得參數的key

關於Validform的詳細說明能夠參看他的官網：

http://validform.rjboy.cn/