精华内容
下载资源
问答
  • bootstrap表单验证

    2021-06-01 19:36:53
    bootstrap表单验证.
  • bootstrap 表单验证

    2017-01-11 16:15:36
    博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator。今天就来看看它如何使用吧。 一、源码及API地址 介绍它之前,还是给出它的源码以及API的地址吧。 bootstrapvalidator...

    前言:做Web开发的我们,表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator。今天就来看看它如何使用吧。

    一、源码及API地址

    介绍它之前,还是给出它的源码以及API的地址吧。

    bootstrapvalidator源码:https://github.com/nghuuphuoc/bootstrapvalidator

    boostrapvalidator api:http://bv.doc.javake.cn/api/

    二、代码以及效果展示

    1、初级用法

    来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3。从描述中我们就可以知道它至少需要jQuery、bootstrap的支持。我们首先引入需要的js组件

    复制代码
       <script src="~/Scripts/jquery-1.10.2.js"></script>
    
        <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
        <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    
        <script src="~/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script>
        <link href="~/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet" />
    复制代码

    我们知道,既然是表单验证,那么我们在cshtml页面就必须要有一个Form,并且我们知道Form里面取元素都是通过name属性去取值的,所以,表单里面的元素都要有一个name的属性值。

    复制代码
         <form>
                <div class="form-group">
                    <label>Username</label>
                    <input type="text" class="form-control" name="username" />
                </div>
                <div class="form-group">
                    <label>Email address</label>
                    <input type="text" class="form-control" name="email" />
                </div>
                <div class="form-group">
                    <button type="submit" name="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>
    复制代码

    有了表单元素之后,就是我们的js初始化了。

    复制代码
    
        $(function () {
            $('form').bootstrapValidator({
            message: 'This value is not valid',
     feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
             },
                fields: {
                    username: {
                        message: '用户名验证失败',
                        validators: {
                            notEmpty: {
                                message: '用户名不能为空'
                            }
                        }
                    },
                    email: {
                        validators: {
                            notEmpty: {
                                message: '邮箱地址不能为空'
                            }
                        }
                    }
                }
            });
        });
    复制代码

    内容应该很容易看懂。来看效果:

    验证通不过,提交按钮灰掉不能点击

    验证通过,提交按钮恢复

    看看效果先感受下,最大优点:使用简单,界面友好。下面我们来看看重叠验证。

    2、中级用法

    上面我们知道了非空验证的写法,除此之外肯定还有其他验证方式啊。别急,我们慢慢来看。上面的代码cshtml部分不动,js部分我们稍作修改:

    复制代码
      $(function () {
            $('form').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    username: {
                        message: '用户名验证失败',
                        validators: {
                            notEmpty: {
                                message: '用户名不能为空'
                            },
                            stringLength: {
                                min: 6,
                                max: 18,
                                message: '用户名长度必须在6到18位之间'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9_]+$/,
                                message: '用户名只能包含大写、小写、数字和下划线'
                            }
                        }
                    },
                    email: {
                        validators: {
                            notEmpty: {
                                message: '邮箱不能为空'
                            },
                            emailAddress: {
                                message: '邮箱地址格式有误'
                            }
                        }
                    }
                }
            });
        });
    复制代码

    加上了重叠验证我们来看效果:

    由上面的代码可以看出在validators属性对应一个Json对象,里面可以包含多个验证的类型:

    notEmpty:非空验证;

    stringLength:字符串长度验证;

    regexp:正则表达式验证;

    emailAddress:邮箱地址验证(都不用我们去写邮箱的正则了~~)

    除此之外,在文档里面我们看到它总共有46个验证类型,我们抽几个常见的出来看看:

    base64:64位编码验证;

    between:验证输入值必须在某一个范围值以内,比如大于10小于100;

    creditCard:身份证验证;

    date:日期验证;

    ip:IP地址验证;

    numeric:数值验证;

    phone:电话号码验证;

    uri:url验证;

    更多验证类型详见:http://bv.doc.javake.cn/validators/。当然涉及中文的验证可能会有些小问题,园友们如果有需要可以自行下去用代码测试下。

    还有一个比较常用的就是submitHandler属性,它对应着提交按钮的事件方法。使用如下:

    复制代码
    $(function () {
            $('form').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    username: {
                        message: '用户名验证失败',
                        validators: {
                            notEmpty: {
                                message: '用户名不能为空'
                            },
                            stringLength: {
                                min: 6,
                                max: 18,
                                message: '用户名长度必须在6到18位之间'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9_]+$/,
                                message: '用户名只能包含大写、小写、数字和下划线'
                            }
                        }
                    },
                    email: {
                        validators: {
                            notEmpty: {
                                message: '邮箱不能为空'
                            },
                            emailAddress: {
                                message: '邮箱地址格式有误'
                            }
                        }
                    }
                },
                submitHandler: function (validator, form, submitButton) {
                    alert("submit");
                }
            });
        });
    复制代码

    在它的Demo里面介绍了很多验证的实例。我们简单看看它的效果,至于实现代码,其实很简单,有兴趣的可以直接看api。

    颜色验证

    Tab页表单验证

    按钮验证


    展开全文
  • 主要介绍了Bootstrap 表单验证formValidation 实现表单动态验证功能,需要的朋友可以参考下
  • 在web开发过程中表单验证是比较常见的需求,友好的错误提示能够用户带来极好的用户体验效果,今天小编给大家带来如何使用bootstrap 表单验证功能,一起看看吧
  • 主要介绍了bootstrap表单验证的实例代码,代码中包括引入的js文件,具体实现方法,大家参考本
  • 主要为大家详细介绍了基于Bootstrap表单验证功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • bootstrap表单验证插件,简易配置参数,即可验证表单,非常好用,欢迎下载。
  • 主要介绍了Bootstrap 表单验证formValidation 实现远程验证功能,需要的朋友可以参考下
  • Twitter Bootstrap表单验证是一款基于jquery实现的网站注册表单验证代码下载。
  • Bootstrap表单验证

    2016-02-28 03:06:00
    主要用过两个: jqBootstrapValidation: ...bootstrapValidator: http://formvalidation.io/ 两者的页面效果都不错 前者使用比较方便,后者比较啰嗦,全部要自己写的js代码控制,写起来会比较烦,...

    主要用过两个:

    jqBootstrapValidation

    https://github.com/ReactiveRaven/jqBootstrapValidation

     

    bootstrapValidator:

    http://formvalidation.io/

     

    • 两者的页面效果都不错
    • 前者使用比较方便,后者比较啰嗦,全部要自己写的js代码控制,写起来会比较烦,而前者主要设置好相关的data-属性即可
    • 可惜前者几乎停止更新了,最近一次还是在2013/10/12更新了一次针对bootstrap3.0的升级,还是无语的Beta版。。:
    • https://github.com/ReactiveRaven/jqBootstrapValidation/releases/tag/2.0.0-alpha

    而且到现在我还有个问题,在jqBootstrapValidation中使用required属性,设置的data-validation-required-message根本不起作用,出来的中文提示(请填写此字段)也没看明白从哪来的~

    转载于:https://www.cnblogs.com/thyong/p/5223991.html

    展开全文
  • 本篇推荐一款twitter做的bootstrapValidator.js(最好用的bootstrap表单验证插件,没有之一),本身bootstrap就是twitter做的,那么使用原配的validator也就更值得信赖。

    本篇推荐一款twitter做的BootstrapValidator,本身Bootstrap就是twitter做的,那么使用原配的validator也就更值得信赖。从百度上搜BootstrapValidator会出现很多款,但我只推荐这款(突然感觉自己有点“库【Steve 库里】吹”的感觉)。

    这里写图片描述

    ###一、一睹为快
    这里写图片描述
    为了简便的介绍,这里只做为空的check。

    BootstrapValidator官方下载地址

    ###二、资源引用

    下载完资源包后,你可以看到如下的目录。
    这里写图片描述

    然后把以下三个文件引入到你项目。

    <link type="text/css" rel="stylesheet" href="${ctx}/components/validate/css/bootstrapValidator.css" />
    <script type="text/javascript" src="${ctx}/components/validate/js/bootstrapValidator.js"></script>
    <script type="text/javascript" src="${ctx}/components/validate/js/language/zh_CN.js"></script>
    

    ###三、会员名称不为空项目配置

    <form class="form-signin required-validate" action="${ctx}/login" method="post" οnsubmit="return validateCallback(this)">
    	<div class="form-group">
    		<div class="row">
    			<label>账户</label>
    			<input class="form-control" type="text" autofocus name="username" placeholder="请输入会员编号" autocomplete="off"
    				data-bv-notempty />
    		</div>
    	</div>
    </form>
    
    1. data-bv-notempty表示该会员编号要做为空check。
    2. form-group的div是必须的,否则会报“too much recursion”错误。
    3. form表单提交的时候会执行validateCallback方法,该方法在第五步中具体介绍。

    ###四、页面加载完成后启用bootstrap validator

    
    $(function() {
    	// validate form
    	$("form.required-validate").each(function() {
    		var $form = $(this);
    		$form.bootstrapValidator();
    		
    		// 修复bootstrap validator重复向服务端提交bug
    		$form.on('success.form.bv', function(e) {
    			// Prevent form submission
    			e.preventDefault();
    		});
    		
    		
    	});
    });
    
    1. 在form表单上加上‘class=“required-validate”’属性,然后通过jquery获取对应form表单,对其执行默认的bootstrapValidator加载。
    2. 一定要注意上面代码中注释部分代码,具体介绍可参照修复BootstrapValidator重复提交的bug

    ###五、form表单提交时验证项目

    function validateCallback(form, callback, confirmMsg) {
    	YUNM.debug("进入到form表单验证和提交");
    
    	var $form = $(form);
    
    	var data = $form.data('bootstrapValidator');
    	if (data) {
    	// 修复记忆的组件不验证
    		data.validate();
    		
    		if (!data.isValid()) {
    			return false;
    		}
    	}
    
    	
    	$.ajax({
    		type : form.method || 'POST',
    		url : $form.attr("action"),
    		data : $form.serializeArray(),
    		dataType : "json",
    		cache : false,
    		success : callback || YUNM.ajaxDone,
    		error : YUNM.ajaxError
    	});
    
    	return false;
    }
    
    1. validateCallback中获取form表单后,通过isValid方法可以返回表单验证是否通过。
    2. 当表单验证通过后,再通过ajax将表单提交到服务端。

    展开全文
  • Twitter Bootstrap表单验证是一款基于jquery实现的网站注册表单验证代码下载。
  • 主要介绍了详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • BootstrapValidator,最好用的bootstrap表单验证插件.pdf
  • 主要介绍了BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码,需要的朋友可以参考下
  • 基于Bootstrap表单验证

    2019-10-17 15:28:19
    基于Bootstrap表单验证 GitHub地址:https://github.com/chentangchun/FormValidate 使用方式: 1.CSS样式 .valierror { b...

    基于Bootstrap表单验证

    GitHub地址:https://github.com/chentangchun/FormValidate

     

    使用方式:

    1.CSS样式

    .valierror {
        border-color: red !important;
    }
    
    .tooltip.right .tooltip-arrow {
        border-right-color: #d15b47;
    }
    
    .tooltip-inner {
        background-color: #d15b47;
    }

     

    <form id="form">
           <input type="text" class="form-control" name="Phone" data-
           <input type="text" class="form-control" name="Name" data-            
                valiType="required">
    </form>
    
    <script>
            var $form = $("#form");
            var isVali = $form.FormValidate();
    
    </script>    

     


    更多专业前端知识,请上 【猿2048】www.mk2048.com
    展开全文
  • Bootstrap表单验证插件bootstrapValidator使用方法整理 项目中使用validators的使用示例。图中使用国际化i18进行中文显示。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,240
精华内容 5,696
关键字:

bootstrap表单验证