jQuery表单验证插件jqBootstrapValidation使用示例

jqBootstrapValidation是一个bootstrap框架样式表单的jQuery验证插件,他能够验证基本的表单字段类型,比如电子邮箱格式、纯数字、纯子母、字段是否为空等,依赖于bootstrap框架的表单样式和Jquery JavaScript框架查找和编辑HTML标签。


安装

下载jqbootstrapvalidation包括你的网页的脚本标签:

 代码如下 复制代码

<script src="/js/jquery.min.js"></script> <!-- or use local jquery -->
<script src="/js/jqBootstrapValidation.js"></script>

应用插件你想验证jqbootstrapvalidation元素应用到

 代码如下 复制代码
<script>
    $(function(){
        $("input,select,textarea").not("[type=submit]").jqBootstrapValidation();
    });
</script>

jqbootstrapvalidation将直接在元素中检查HTML5验证器属性,加上通过指定的数据属性的任何额外的选项,参见这里的说明。

校验字段类型

 代码如下 复制代码

电子邮件

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label">Email address</label>
        <div class="controls">
            <input type="email" />
            <p class="help-block"></p>
        </div>
    </div>
</form>
Attribute Value Req?
type email  √
data-validation-email-message (your failure message) 

数字类型

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label">Type a number</label>
        <div class="controls">
            <input type="number" />
            <p class="help-block"></p>
        </div>
    </div>
</form>

Attribute Value Req?
type “number”  √
data-validation-number-message your failure message 

不能为空

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label">Type something</label>
        <div class="controls">
            <input type="text" name="some_field" required />
            <p class="help-block"></p>
        </div>
    </div>
</form>

Attribute Value Req?
required (doesn’t need a value)  √
data-validation-required-message (your failure message)

当然这里只是简单的介绍到了这个jquery表单验证插件的最基础的功能了,大家可以深入的去研究一下。

时间: 2024-09-16 23:36:02

jQuery表单验证插件jqBootstrapValidation使用示例的相关文章

Yii框架中jquery表单验证插件用法示例_php实例

本文实例讲述了Yii框架中jquery表单验证插件用法.分享给大家供大家参考,具体如下: 运行效果图如下: 视图层: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

Yii框架中jquery表单验证插件用法示例

本文实例讲述了Yii框架中jquery表单验证插件用法.分享给大家供大家参考,具体如下: 运行效果图如下: 视图层: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

jquery表单验证插件(jquery.validate.js)的3种使用方式

这篇文章主要介绍了jquery表单验证插件(jquery.validate.js)的3种使用方式,本文用详细的代码实例讲解jquery表单验证插件的使用,需要的朋友可以参考下     jquery 验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery 插件和 jquery 验证插件: 第一步:引入插件 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js

jquery表单验证插件(jquery.validate.js)的3种使用方式_jquery

jquery  验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery  插件和 jquery 验证插件: 第一步:引入插件 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jq

一款比较实用齐全的jQuery表单验证插件

一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,网址,数字,AJAX用户名验证以及自定义的正则等等几乎所有我们要用到的验证. 不多说,看DEMO吧:点些下载 如何使用? 第一步,当然是和使用其他jQuery插件一样,引入插件文件vanadium.js;第二步,根据你表单要使用的验证方法,在你的表单中加入对应的验证挂钩.比如你想使下面的表单为必填项:

JQuery表单验证插件EasyValidator用法分析_jquery

本文实例讲述了JQuery表单验证插件EasyValidator用法.分享给大家供大家参考.具体如下: 本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手. DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以针对不同用户特殊需求,自行写正则吧. EasyValidator实现的功能: 1.提示功能(在表单或者其他标签中加入tip="想提示的文字") 如: 复制代码 代码如下: <inp

jQuery 表单验证插件formValidation实现个性化错误提示_javascript技巧

其效果图如下:使用说明 需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式 使用实例 一,包含文件部分 复制代码 代码如下: <script src="jquery.js" type="text/javascript"></script> <script src="jquery.validationEngine.js&

jQuery表单验证插件总结详解

vanadium.js 如何使用? 第一步,当然是和使用其他jQuery插件一样,引入插件文件vanadium.js; 第二步,根据你表单要使用的验证方法,在你的表单中加入对应的验证挂钩.比如你想使下面的表单为必填项: <input id="checkempty" /> 那么,就给它添加class=":required"> : <input id="checkempty" class=":required&quo

实例详解jQuery表单验证插件validate_jquery

validate插件是一个基于jquery的表单验证插件了里面有许多的常用的一些验证方法我们可以直接调用,具体的我们一起来看看. 例子,html代码 <!DOCTYPE html> <html lang="en"> <head> <include file="Common/Header" /> <meta charset="utf-8"> <script src="/jq