运行指间宝项目,进入登录注册页面,注册采用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}'
<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();
});