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的详细说明可以参看他的官网: