这是根据bootstrap表单验证自己写的一个方法
原理很简单,添加和移除类名has-success
和has-error
,错误验证中还能设置错误信息
var formValid = {
error: function (e, errMsg) {
e.parents('.control-group').removeClass('has-success');
e.parents('.control-group').addClass('has-error');
e.siblings('.help-block').text(errMsg);
},
success: function (e) {
e.parents('.control-group').removeClass('has-error');
e.parents('.control-group').addClass('has-success');
e.siblings('.help-block').text("");
}
//在需要的每一处表单事件下调用方法
formValid.error($('#name'), '错误提示信息');
优点是,你可以将它使用于任何操作,如点击事件、失焦事件等,而且使用灵活,一条语句对应一个输入框;
但是同时,一条语句对应一个输入框,也就意味着维护困难,如果要新增验证条件,需要找到对应的语句做修改,容易遗漏。
后来根据需求的变动,对表单验证方式也做了优化,使用bootstrap的扩展插件sco.valid.js。首先记得在页面内链入该插件,而且要放于bootstrap之后引入
使用方法,单独在一个模块定义所有的表单验证:
var fromValid = $.scojs_valid("#formAdd",{
//account等为输入框id名
rules: {
account : ['not_empty',{'min_length': 2},{'max_length': 20}],
email : ['not_empty','email'],
password : ['not_empty', {'min_length': 6}],
confirmPassword :[{matches: 'password'}],
code:['not_empty']
},
messages: {
account: {
not_empty: "请输入注册账号",
min_length: "账号不少于2个字符",
max_length: "账号不能超过20个字符"
},
email: {
not_empty: "请输入邮箱",
email: "请输入正确的邮箱"
},
password: {
not_empty: "请输入登陆密码,区分大小写",
min_length: "密码太短了,至少要6位哦"
},
confirmPassword:{
matches: "两次输入密码不一致",
},
code:{
not_empty: "请输入验证码",
}
},
wrapper:'.form-group'
,onSuccess: function(response, validator, $form) {
tipsOp(response.data,response.status);
if(response.url){
setTimeout(function(){window.location.href=response.url;},3000);
}
}
});
//方法调用,只需要在最终提交之前调用一次
if(!fromValid.validate()) {
return;
};
这种方法在表单提交前调用一次,可以验证所有的表单。后期维护起来也十分方便,只需要在定义方法的地方删除或新增,不会触碰到业务代码。
缺点是不够人性化,无法针对性地验证单个表单。
可看情况对两种方法进行选择