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();
                  //表单数据初始化
                }
            });

然后，我们就可以在表单中输入数据，体验它的验证效果了，附上一张截图：

aaarticlea/png;base64,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" alt="" />

当我们输入正确的数据后，点击保存按钮，将执行我们的save操作。

    function save() {
                  alert("我通过验证了");
            }

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