运行指间宝项目，进入登录注册页面，注册采用bootstarpvalidator的验证，需要验证字段有 用户名、密码、联系人、手机号、服务电话和地址。以用户名验证为例，前台jsp页面<input name="uid" ${uc.uid} type="text" class="form-control" /> 此处的${uc.uid}是获取一些列的验证信息。浏览器检查可见
shops.java 代码：
/*在map存放一些uid的标准包括返回错误的信息*/
public class Shops extends questCab { 实体类的一些字段省略... public Shops () { super(); Map v = null; /** [uid] ***/ v = new HashMap(); v.put("columnName","uid"); v.put("type","VARCHAR"); v.put("jtype","String"); v.put("valdef",null); v.put("remark","用户名"); v.put("isnull",false); v.put("size",50); v.put("decimal_digits",0); v.put("ispk",false); v.put("cnname","用户名"); v.put("regEx","[\\s\\S]{1,50}"); v.put("regMsg","用户名输入格式不正确,必须填写,且长度不能超过50个字符"); c.put("uid",v); ... } 既然是注册，那么调用zhuce.java类 public class Zhuce extends PageMode { private Map<String, String> uc; public Map getUc() { return uc; } @Override public void init() throws Exception { uc = new HashMap(); Shops u = new Shops(); JSONObject t = new JSONObject(); JSONObject _c = u.c; uc.put("atform", "qc");//表单值提交前缀 //用户名 JSONObject m = _c.getJSONObject("uid"); t.put("min", 3); t.put("max", m.get("size")); m.put("stringLength", t); uc.put("uid", u.toChkHtmlAttr(m)); //其他验证省略... } }打印出 uc.get("uid");结果如下：
cnname='用户名' isnull='false' regEx='[\s\S]{1,50}' regMsg='用户名输入格式不正确,必须填写,且长度不能超过50个字符' stringLength='{"min":3,"max":50}'对应jsp中就会显示如下： <input name="pwd" cnname="密码" isnull="false" regex="[\s\S]{1,32}" regmsg="密码输入格式不正确,必须填写,且长度不能超过32个字符" identical="{"field":"pwd1","message":"两次密码不一致"}" different="{"field":"uid","message":"不能和用户名相同"}" stringlength="{"min":6,"max":32}" type="password" class="form-control" data-bv-field="pwd">
调用bootstrap-validator验证
//警告标贴 //qsel 容器(el,JQobj,id,class),$(qsel).append(this) //str 默认显示内容(html) //noshow 默认显示(boolean),true是 //返回warningTip对象(Element) function warningTip(qsel,str,noshow){ var qp=(qsel instanceof jQuery)?qsel:$(qsel); if(!qp[0]) return null; var qt=$(document.createElement("div")).css("font-weight","bold"), qe=$(document.createElement("div")) .addClass("alert alert-warning") .append('<a href="#" class="close" οnclick="$(this).parent().hide()">×</a>'); if((str==undefined && noshow==undefined)||noshow) qe.css("display","none"); if(str) qt.html(str); qp.append(qe.append(qt)); qe[0].showstr=qp[0].showstr=function(str){qt.html(str);qe.show()}; qe[0].hidestr=qp[0].hidestr=function(){qe.hide()}; return qe[0]; } //初始化bootstrapValidator验证器 //qsel form容器(el,JQobj,id,class) //subfn 提交函数 //返回 bootstrapValidator对象 function initVtor(qsel,subfn){ var qp=(qsel instanceof jQuery)?qsel:$(qsel); if(!qp[0]) return null; var sfn=$.isFunction(subfn)? subfn:function(qform,vtor,evt){vtor.defaultSubmit()}, at=qp.attr("atform"),els={}; qp[0].atform=at?at+".":""; $.each(qp[0].elements, function(i,el){ if(!el.name) return; var qe=$(el), v={}, js, ctag=qe.attr("cnname"), rs=qe.parent().find("label[for="+el.name+"]").text(); ctag=rs?rs:(ctag?ctag:""); rs=$.trim(qe.attr("isnull")+""); if(rs.length>0 && rs=="false"){ v["notEmpty"]={ message:ctag+"不能为空, 请填写" }; } rs=$.trim(qe.attr("regEx")+""); if(rs!="undefined" && rs.length>0){ v["regexp"]={ regexp:$.trim(qe.attr("regEx")), message:qe.attr("regMsg") }; } rs=$.trim(qe.attr("stringLength")+""); if(rs!="undefined" && rs.length>2){ js=JSON.parse(rs); if(js){ var a=[]; if(js.min) a.push("不能小于"+js.min+"位"); if(js.max) a.push("不能大于"+js.max+"位"); js.message=ctag+a.join(", "); v["stringLength"]=js; } } rs=$.trim(qe.attr("identical")+""); if(rs!="undefined" && rs.length>2){ js=JSON.parse(rs); if(js) v["identical"]=js; } rs=$.trim(qe.attr("different")+""); if(rs!="undefined" && rs.length>2){ js=JSON.parse(rs); if(js) v["different"]=js; } if(!$.isEmptyObject(v)) els[el.name]={validators:v} }); var vtor=qp.bootstrapValidator({ message:"该字段不能为空, 请填写", feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, //submitHandler:sfn,//版本号v0.5-dev以后不再支持submitHandler配置 fields:els }).on("success.form.bv",function(ev){ ev.preventDefault(); var qform = $(ev.target); var vtor = qform.data('bootstrapValidator'); sfn(qform,vtor,ev); }); console.dir(els); return vtor.data('bootstrapValidator'); }提交表单的javascript：
var wtip=warningTip("#regForm"); var fVtor=initVtor("#regForm", function(qform,validator,evt){ //console.log(this,f); wtip.hidestr(); var d=getjsform(qform), a=qform[0].atform,pm={};//提交前缀 $.each(d, function(k,v) { //console.log(k,v); pm[a+k]=v; }); $.post(qform.attr("action"),pm, function(re){ if(re.ok){ alert("注册成功!"+re.msg); return; } wtip.showstr(re.msg); //alert(re.msg); },"json"); return false; } ); //console.log("......") $('#resetBtn').click(function() { fVtor.resetForm(true); wtip.hidestr(); });