BootStrap表单验证实例代码
Bootstrap，来自Twitter，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。
下面给大家分享bootstrap表单验证实例代码，具体代码如下所示：
<%@pagelanguage="java"contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%> <%@includefile="../include/taglib.jsp"%> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"> <%@includefile="../include/common.jsp"%> <scripttype="text/javascript"src="form.js"></script> <scripttype="text/javascript"src="bootstrapValidator.min.js"></script> <linkrel="stylesheet"href="../../css/edit.css"> <linkrel="stylesheet"href="bootstrapValidator.min.css"> <title>表单测试</title> </head> <bodyclass="no-skin"> <divclass="main-container"id="main-container"> <divclass="main-content"> <divclass="main-content-inner"> <divclass="page-content"> <divclass="row"> <divclass="col-xs-12col-sm-12col-md-12"> <formid="formTest"class="form-horizontal"role="form"> <divclass="form-group"> <labelclass="col-xs-3col-sm-3col-md-5no-padding-right">用户姓名:</label> <divclass="col-xs-3col-sm-3col-md-3"> <div> <inputtype="text"id="username"name="username"class="col-xs-12col-sm-12col-md-12"placeholder="用户姓名"/> </div> </div> </div> <!--生日--> <divclass="form-group"> <labelclass="col-xs-3col-sm-3col-md-5no-padding-right">生日:</label> <divclass="col-xs-3col-sm-3col-md-3"> <div> <inputtype="text"id="birthday"name="birthday"class="col-xs-12col-sm-12col-md-12"placeholder="生日"/> </div> </div> </div> <!--邮件--> <divclass="form-group"> <labelclass="col-xs-3col-sm-3col-md-5no-padding-right">邮件:</label> <divclass="col-xs-3col-sm-3col-md-3"> <div> <inputtype="text"id="email"name="email"class="col-xs-12col-sm-12col-md-12"placeholder="邮件"/> </div> </div> </div> <!--密码--> <divclass="form-group"> <labelclass="col-xs-3col-sm-3col-md-5no-padding-right">密码:</label> <divclass="col-xs-3col-sm-3col-md-3"> <div> <inputtype="text"id="password"name="password"class="col-xs-12col-sm-12col-md-12"placeholder="密码"/> </div> </div> </div> <!--确认密码--> <divclass="form-group"> <labelclass="col-xs-3col-sm-3col-md-5no-padding-right">确认密码:</label> <divclass="col-xs-3col-sm-3col-md-3"> <div> <inputtype="text"id="confirmPassword"name="confirmPassword"class="col-xs-12col-sm-12col-md-12"placeholder="确认密码"/> </div> </div> </div> <divclass="form-group"> <labelclass="col-xs-3col-sm-3col-md-5no-padding-right">语言:</label> <divclass="col-xs-3col-sm-3col-md-3"> <div> <inputtype="checkbox"id="languages"name="languages"value="中文"style="margin-top:12px"/>中文 </div> <div> <inputtype="checkbox"id="languages"name="languages"value="英语"style="margin-top:12px"/>英语 </div> <div> <inputtype="checkbox"id="languages"name="languages"value="德语"style="margin-top:12px"/>德语 </div> <div> <inputtype="checkbox"id="languages"name="languages"value="韩语"style="margin-top:12px"/>韩语 </div> </div> </div> <!--自定义--> <divclass="form-group"> <labelclass="col-xs-3col-sm-3col-md-5no-padding-right"id="callbackshow"></label> <divclass="col-xs-3col-sm-3col-md-3"> <div> <inputtype="text"id="callbacktest"name="callbacktest"class="col-xs-12col-sm-12col-md-12"placeholder="自定义"/> </div> </div> </div> </form> <!--PAGECONTENTENDS--> </div><!--/.col--> </div><!--/.row--> </div><!--/.page-content--> </div><!--/.main-content-inner--> </div><!--/.main-content--> <divclass="clear-div"></div> <divclass="footer-button-boxcontainer"> <divclass="button-conent"> <buttonclass="btn"type="button"id="submitBtn"> 提交 </button> <buttonclass="btn"type="button"id="resetBtn"> 重置 </button> </div><!--/.button-conent--> </div><!--/.footer-button-box--> </div><!--/.main-container--> </body> </html>
--------------------------------------------------引入js----------------------------------------------------------------------
$(function(){
//重置
$('#resetBtn').click(function(){
//清空表单验证内容
$('#formTest')[0].reset();
//清空表单验证信息
$('#formTest').bootstrapValidator('resetForm');
});
functionrandomNumber(min,max){
returnMath.floor(Math.random()*(max-min+1)+min);
};
$('#callbackshow').html([randomNumber(1,100),'+',randomNumber(1,200),'='].join(''));
//校验
$('#formTest').bootstrapValidator({
message:'',
feedbackIcons:{
valid:'glyphiconglyphicon-ok',
invalid:'glyphiconglyphicon-remove',
validating:'glyphiconglyphicon-refresh'
},
//验证用户名字
fields:{
username:{
message:'用户名验证失败',
validators:{
notEmpty:{
message:'用户名不能为空'
},
stringLength:{
min:2,
max:4,
message:'名字长度只能为2-4位'
},
regexp:{
regexp:/^[\u2E80-\u9FFF]+$/,
message:'只能为汉字'
},
}
},//endusername
birthday:{
validators:{
notEmpty:{
message:'生日不能为空'
},
date:{
format:'YYYY/MM/DD',
message:'输入正确的日期格式，YYYY/MM/DD'
}
}
},//endbirthday
//验证email
email:{
validators:{
notEmpty:{
message:'邮箱地址不能为空'
},
emailAddress:{
message:'邮箱地址不对'
}
}
},//endemail
password:{
validators:{
notEmpty:{
message:'密码不能为空'
},
stringLength:{
min:6,
max:15,
message:'密码长度最小为6最多为15'
},
regexp:{
regexp:/^[\d]+$/,
message:'只能为数字'
},
}
},//endpassword
confirmPassword:{
validators:{
notEmpty:{
message:'密码不能为空'
},
stringLength:{
min:6,
max:15,
message:'密码长度最小为6最多为15'
},
identical:{
field:'password',
message:'2次密码不一致'
},
}
},//endconfirmPassword
'languages':{
validators:{
notEmpty:{
message:'至少要选择一个'
},
choice:{
min:2,
max:3,
message:'选择2-3个'
}
}
},//endlanguages
callbacktest:{
validators:{
callback:{
message:'输入错误',
callback:function(value,validator){
varitems=$('#callbackshow').html().split(''),
sum=parseInt(items[0])+parseInt(items[2]);
console.log(sum);
returnvalue==sum;
}
}
}
},//endcallbacktest
}
});
//表单提交
$("#formTest").submit(function(ev){ev.preventDefault();});
$("#submitBtn").on("click",function(){
varbootstrapValidator=$("#formTest").data('bootstrapValidator');
bootstrapValidator.validate();
if(bootstrapValidator.isValid()){
$.ajaxRequest({
url:'www.baidu.com',
});
}else{
return;
}
});
});
以上所述是小编给大家介绍的BootStrap表单验证实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！