首页 > 代码库 > bootstrap学习起步篇：初识bootstrap之表单验证（二）
bootstrap学习起步篇：初识bootstrap之表单验证（二）
学习bootstrap是个过程，它提供给我们的文档上有很详细的说明。包括常用的栅栏布局、页面元素等，这里就不啰嗦了，今天，我就来说下结合jquery的表单验证。
最开始不借助插件，我们需要自己去编写验证规则。使用jquery验证，能让我们省去一些功夫。
首先我们需要引入js文件:jquery.validate.js；另外为了能使用它的样式，我们需另外引入screen.css。当然，如果要使用bootstrap，还是要引入其所需的文件的。
下面，我们需要一个表单：
<form class="form-horizontal" id="form1" method="post"> <div class="control-group"> <label class="control-label"> 用户名 </label> <div class="controls"> <div class="input-icon"> <input type="text" class="m-wrap" id="loginname" name="loginname"> </div> </div> </div> <div class="control-group"> <label class="control-label"> 手机 </label> <div class="controls"> <div class="input-icon"> <input type="text" class="m-wrap" id="mobilephone" name="mobilephone"> </div> </div> </div> <div class="control-group"> <label class="control-label"> 邮箱 </label> <div class="controls"> <div class="input-icon"> <input type="text" class="m-wrap" id="email" name="email"> </div> </div> </div> <div class="form-actions"> <button type="submit" class="btn blue"> <i class="icon-ok"></i> 保存 </button> <button type="button" class="btn" onclick="history.go(-1)"> 返回 </button> </div> </form>
在页面加载的时候，我需要添加表单的验证规则：
function checkForm(){ $("#form1").validate({ onsubmit:true, rules: { loginname: { required: true //此处就是必填项验证 }, mobilephone: { required: true, phone:true //号码格式验证，jquery.validate.js本身不提供此项验证，可通过引入扩展插件或修改jquery.validate.js实现 }, email: { required: true, email: true //邮箱格式验证 }, roleidstr:{ required: true } }, messages: { //相对应的错误提示信息 loginname: { required: "请输入账号！" }, mobilephone: "请输入有效的手机号！", email: "请输入有效的邮箱地址" }, success:"valid", submitHandler:function(){ save(); //验证通过后，点击保存按钮时执行的函数 } }); } $(function() { checkForm(); //表单数据初始化 } });
然后，我们就可以在表单中输入数据，体验它的验证效果了，附上一张截图：
当我们输入正确的数据后，点击保存按钮，将执行我们的save操作。
function save() { alert("我通过验证了"); }
这样，我们就完成了表单的验证和提交的过程。
bootstrap学习起步篇：初识bootstrap之表单验证（二）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。