基于Bootstrap+jQuery.validate实现表单验证

下面是关于“基于Bootstrap+jQuery.validate实现表单验证”的完整攻略：

操作步骤

第一步：下载Bootstrap和jQuery.validate

Bootstrap官网提供了下载地址，你也可以在jQuery.validate的官网上下载该脚本。在下载的文件中，Bootstrap含有css、js等文件，而jQuery.validate只含有js文件。

第二步：引入文件

在HTML文件中导入相关文件。为了使样式更好看，Bootstrap的CSS文件要先于jQuery.validate的CSS文件导入。一般css都放在标签中，而js放在标签的底部，这样可以提升页面渲染速度。

第三步：添加表单验证代码

我们可以使用jQuery.validate的提供的一些方法来对表单作出相应的验证，比如必填项的验证、长度验证和正则表达式验证。

以下是一个简单的示例：

HTML：

<form>
    <div class="form-group">
        <label for="inputName">姓名</label>
        <input type="text" class="form-control" id="inputName" placeholder="请输入姓名" name="name">
    </div>
    <div class="form-group">
        <label for="inputEmail">邮箱</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="请输入邮箱" name="email">
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>

JavaScript：

$(document).ready(function() {
    $("form").validate({
        rules: {
            name: "required",
            email: {
                required:true,
                email:true
            }
        },
        messages: {
            name: "请填写姓名",
            email: {
                required: "请填写邮箱",
                email: "请输入正确的邮箱格式"
            }
        }
    });
});

第四步：UI美化

Bootstrap的样式已经够好看了，开发者需要根据自己的使用需要屏蔽一些Bootstrap的默认样式。当然，你可以自定义自己的样式。

示例一：

定义一个类名为invalid的样式：

.invalid {
border-color: #d9534f;
background-color: #f2dede;
color: #a94442;
}

使用Bootstrap的Tooltip插件为错误提示添加“感叹号”图标和Tooltip：

 errorPlacement: function(error, element) {
                element.tooltip('destroy');
                element.closest('.form-group').addClass('has-error has-feedback');
                element.after('<span class="glyphicon glyphicon-exclamation-sign form-control-feedback" aria-hidden="true" style="top:25px;"></span>');
                element.after(error);
            }

示例二：

使用自定义样式使表单变得更加美观：

.has-error{
    background-color:red;
}
.has-success{
    background-color:lightgreen;
}

总结

通过以上步骤，我们成功地基于Bootstrap和jQuery.validate实现了表单验证，并且进行了UI美化。此外，开发者也可以将表单验证和UI的相关逻辑深入细化，以满足自己的需求。