bootstrapValidator前台验证及remote后台验证
在实际项目中需要验证前台数据输入的正确性，因此引入bootstrapvalidator插件，效果如下
1.引入
2.前端界面
3.javascript
使用bootstrapValidator进行验证，并在提交时验证
(1)使用remote进行后台验证
(2)使用regexp进行正则表达式验证
(3)使用notEmpty进行空置验证
$(document).ready(function () {
$("#editForm").bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
ip: {
validators: {
notEmpty: {
message: 'IP不能为空'
},
remote: {//ajax验证,server result:{"valid",true or false}
url: 'IPValidate',//验证地址
message: 'IP已存在',//提示消息
delay : 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: 'POST'//请求方式
}
}
}
,
mac: {
validators: {
notEmpty: {
message: 'MAC不能为空'
},
regexp: {
regexp: /^[A-Fa-f0-9]{4}-[A-Fa-f0-9]{4}-[A-Fa-f0-9]{4}$/,
message: 'mac不合法，格式应为ffff-ffff-ffff'
}
}
}
,
point: {
validators: {
notEmpty: {
message: '信息点不能为空'
}
}
}
}
});
提交时验证
//提交表单
function updateForm() {
$('#editForm').data("bootstrapValidator").validate();
var isValid = $('#editForm').data("bootstrapValidator").isValid();
if(isValid) {
// 验证成功、上传表单数据。。。
} else {
alert("验证失败，请检查字段")
return;
}
})
4.remote后台验证IP重复验证
这里需要说明的是bootstrap的remote验证器需要的返回结果一定是json格式的数据 :
{"valid":false} //表示不合法，验证不通过
{"valid":true} //表示合法，验证通过
//IP重复项验证
@ResponseBody
@RequestMapping(value="IPValidate")
public String pageModel(HttpServletRequest request) {
System.out.println("==================IP重复项验证/IPValidate=======================");
String ip=request.getParameter("ip");
int total=iPrecordService.IPSelect(ip);
JSONObject result = new JSONObject();
System.out.println("IPvalidate==="+total);
if(total>0)
result.put("valid","false");
else
result.put("valid","true");
return result.toJSONString();
}
5.其他用法
password: {
message:'密码无效',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
},
identical: {//相同
field: 'password', //需要进行比较的input name值
message: '两次密码不一致'
},
different: {//不能和用户名相同
field: 'username',//需要进行比较的input name值
message: '不能和用户名相同'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
repassword: {
message: '密码无效',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
},
identical: {//相同
field: 'password',
message: '两次密码不一致'
},
different: {//不能和用户名相同
field: 'username',
message: '不能和用户名相同'
},
regexp: {//匹配规则
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: '邮件不能为空'
},
emailAddress: {
message: '请输入正确的邮件地址如：[email protected]'
}
}
},
phone: {
message: 'The phone is not valid',
validators: {
notEmpty: {
message: '手机号码不能为空'
},
stringLength: {
min: 11,
max: 11,
message: '请输入11位手机号码'
},
regexp: {
regexp: /^1[3|5|8]{1}[0-9]{9}$/,
message: '请输入正确的手机号码'
}
}
}