BootStrap表单验证实例代码

2024-05-06 15:02:51

字体：大中小

来源：转载

供稿：网友

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

下面给大家分享bootstrap表单验证实例代码，具体代码如下所示：

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%><%@ include file="../include/taglib.jsp"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><%@include file="../include/common.jsp" %><script type="text/javascript" src="form.js"></script><script type="text/javascript" src="bootstrapValidator.min.js"></script><link rel="stylesheet" href="../../css/edit.css"><link rel="stylesheet" href="bootstrapValidator.min.css"><title>表单测试</title></head><body class="no-skin"><div class="main-container" id="main-container"><div class="main-content"><div class="main-content-inner"><div class="page-content"><div class="row"><div class="col-xs-12 col-sm-12 col-md-12"><form id="formTest" class="form-horizontal" role="form">   <div class="form-group"><label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">用户姓名:</label><div class="col-xs-3 col-sm-3 col-md-3"><div><input type="text" id="username" name="username" class="col-xs-12 col-sm-12 col-md-12" placeholder="用户姓名"/></div></div></div><!-- 生日--><div class="form-group"><label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">生　　日:</label><div class="col-xs-3 col-sm-3 col-md-3"><div><input type="text" id="birthday" name="birthday" class="col-xs-12 col-sm-12 col-md-12" placeholder="生日"/></div></div></div><!-- 邮件 --><div class="form-group"><label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">邮　　件:</label><div class="col-xs-3 col-sm-3 col-md-3"><div><input type="text" id="email" name="email" class="col-xs-12 col-sm-12 col-md-12" placeholder="邮件"/></div></div></div><!-- 密码 --><div class="form-group"><label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">密　　码:</label><div class="col-xs-3 col-sm-3 col-md-3"><div><input type="text" id="password" name="password" class="col-xs-12 col-sm-12 col-md-12" placeholder="密码"/></div></div></div><!-- 确认密码 --><div class="form-group"><label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">确认密码:</label><div class="col-xs-3 col-sm-3 col-md-3"><div><input type="text" id="confirmPassword" name="confirmPassword" class="col-xs-12 col-sm-12 col-md-12" placeholder="确认密码"/></div></div></div><div class="form-group"><label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">语　　言:</label><div class="col-xs-3 col-sm-3 col-md-3"><div><input type="checkbox" id="languages" name="languages" value="中文" style="margin-top:12px"/>中文</div> <div><input type="checkbox" id="languages" name="languages" value="英语" style="margin-top:12px"/>英语</div> <div><input type="checkbox" id="languages" name="languages" value="德语" style="margin-top:12px"/>德语 </div> <div><input type="checkbox" id="languages" name="languages" value="韩语" style="margin-top:12px"/>韩语 </div></div></div><!-- 自定义 --><div class="form-group"><label class="col-xs-3 col-sm-3 col-md-5 no-padding-right" id="callbackshow"></label><div class="col-xs-3 col-sm-3 col-md-3"><div><input type="text" id="callbacktest" name="callbacktest" class="col-xs-12 col-sm-12 col-md-12" placeholder="自 定 义"/></div></div></div></form><!-- PAGE CONTENT ENDS --></div><!-- /.col --></div><!-- /.row --></div><!-- /.page-content --></div><!-- /.main-content-inner --></div><!-- /.main-content --><div class="clear-div"></div><div class="footer-button-box container" ><div class="button-conent">  <button class="btn" type="button" id="submitBtn">提交</button><button class="btn" type="button" id="resetBtn">重置</button></div><!-- /.button-conent --></div><!-- /.footer-button-box --></div><!-- /.main-container --></body></html>

上一篇：js数组与字符串常用方法总结

下一篇：JavaScript利用闭包实现模块化