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("我通过验证了");
            }

 

  这样，我们就完成了表单的验证和提交的过程。