表单验证插件Validform使用笔记

Validform是一款很强大的表单验证插件，号称一行代码搞定整站的表单验证！

实际使用感觉还不错，比jquery-validate简单易用。

1、应用Validform，所谓的一句话加验证。

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

上面是用的class选取表单对象，demoform就是form使用的class。

用id也行

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

我们把这称为初始化吧，初始化的时候还可以加参数

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

tiptype设置的是提示信息的样式，值有1、2、3、4。2是在侧边提示信息，Validform会查找class为"Validform_checktip"的标签显示提示信息。

2、验证示例

除了上面的一句话初始化，还需要在需要验证的表单属性上添加配置

<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>

3、修改验证通过时的提示信息

验证通过时的提示信息是写在js里的，我直接修改了，下面的r就是验证通过时的提示信息

var e={tit:"提示信息",w:{"*":"不能为空！","*6-16":"请填写6到16位任意字符！,"r:"格式符合要求",c:"正在检测信息…",s:"请{填写|选择}{0|信息}！",v:"所填信息没有经过验证，请稍后…",p:"正在提交数据…"}

4、修改手机验证的正则表达式

Validform已经几年没有更新了，后来又出了新的手机号码，比如170号段，所以需要修改下手机验证的正则表达式，也是直接修改了js

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

5、后台验证后的返回格式

	/**
	 * 用户手机校验
	 */
	@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/

表单验证插件Validform使用笔记

猜你喜欢