bootstrapValidator.min.js表单验证插件
本文实例为大家分享了bootstrapValidator.min.js表单验证的具体代码，供大家参考，具体内容如下
注意：下载后全选复制并粘贴到新建js文件名为bootstrapValidator.min.js下即可。
测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
width: 690px;
}
th{
padding-left: 23%;
padding-bottom: 20px;
}
td{
width: 110px;
}
b{
color: #f00;
}
</style>
</head>
<body>
<!--表单-->
<div class="ctn">
<form class="fm" method="post" onsubmit="return doTable()">
<table align="center">
<th class="perWl" align="left" colspan="2">物流服务商</th>
<tr>
<td class="txt" align="right" width="100">登 陆 名 称：</td>
<td class="wlIcon icon">
<s></s>
<input type="text" name="lgname" maxlength="20"/>
<b>*</b>
<span></span>
</td>
</tr>
<tr>
<td class="txt" align="right">密 码：</td>
<td class="wlIcon icon">
<s class="mm"></s>
<input type="password" name="password" maxlength="18"/>
<b>*</b>
<span></span>
</td>
</tr>
<tr>
<td class="txt" align="right">确 认 密 码：</td>
<td class="wlIcon icon">
<s class="mm"></s>
<input type="password" name="repass" maxlength="18"/>
<b>*</b>
<span></span>
</td>
</tr>
<tr>
<td class="wlBtns" align="center" colspan="2">
<s></s>
<button type="submit">注 册</button>
<button class="cancel" type="submit">取 消</button>
</td>
</tr>
</table>
</form>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrapValidator.min.js"></script>
<script type="text/javascript">
/*表单验证*/
var gets = true;//是否让表单提交
$(function(){
// 提示信息===========================================
$("input[name=lgname]").focus(function(){
if($(this).val() == this.defaultValue){
$(this).val('');
}
}).blur(function(){
if($(this).val() == ''){
$(this).val(this.defaultValue);
}
});
//当输入框失去焦点的时候，需要执行的方法
$("input[name=lgname]").blur(function(){doLgname();});
$("input[name=password]").blur(function(){doPassword();});
$("input[name=repass]").blur(function(){doRepass();});
});
// 登陆名称的验证==========================
function doLgname(){
var t = $("input[name=lgname]");
var span = t.next();
if(/^\w{6,16}$/.test(t.val())){
span.html("填写正确").css({color:"green",fontSize:"12px"});
return true;
}else{
span.html("包含数字、字母、下划线，长度在6-16之间").css({color:"#ec4e4e",fontSize:"12px"});
return false;
}
}
// 密码的验证==========================
function doPassword(){
var t = $("input[name=password]");
var span = t.next();
if(t.val() == ''){
span.html("密码不能为空").css({color:"#ec4e4e",fontSize:"12px"});
return false;
}else{
span.html('');
if(/.{15,}/.test(t.val())){
span.html("密码长度不合法");
return false;
}
return true;
}
}
// 确认密码的验证==========================
function doRepass(){
var t = $("input[name=repass]");
var span = t.next();
if(t.val() == $("input[name=password]").val() && t.val() != ''){
span.html("填写正确").css({color:"green",fontSize:"12px"});
return true;
}else{
span.html("两次密码不一致").css({color:"#ec4e4e",fontSize:"12px"});
return false;
}
}
// 数据提交的时候执行的方法
function doTable(){
var lg = doLgname();
var pass = doPassword();
var repass = doRepass();
if(lg&&pass&&repass){
return true;
}else{
return false;
}
}
</script>
</body>
</html>
表单插件：bootstrapValidator.min.js 下载地址
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
基于jQuery 实现bootstrapValidator下的全局验证
BootstrapValidator 是一款专门针对Boostrap v3的表单检验jQuery插件,能够实现众多常用的检验功能,并且易于扩展,还支持中文!对于bootstrap用户来说能够开箱即用. 前置: 引入jQuery.bootstrap.bootstrapValidator 问题描述: 项目中要求所有的表单输入框中都不能输入&符号.没有在bootstrap中找到有方法可用,只能自己动手了 思路: 使用正则. 分两种情况,第一种,如果输入框有自身的正则验证则不用去管(一般来说使用正则验证
-
jquery插件bootstrapValidator表单验证详解
Bootstrap Validator是为Bootstrap3设计的一款表单验证jQuery插件,非常适合基于Bootstrap框架的网站. 看作者的github,这款插件已经不再更新了,而推荐使用FormValidation,不过现在还是先介绍一下BootstrapValidator的使用. 准备工作 BootstrapValidator文档地址:http://bv.doc.javake.cn/ 下载源码后,将其中的bootstrapValidator.min.css和bootstapVali
-
基于BootstrapValidator的Form表单验证(24)
Form表单进行数据验证是十分必要的,我们可以自己写JS脚本或者使用JQuery Validate 插件来实现.对于Bootstrap而言,利用BootstrapValidator来做Form表单验证是个相当不错的选择,两者完全兼容,我们也不用去关注CSS样式等美工效果. 0x01 引入BootstrapValidator 官网:BootstrapValidator,作为一个纯粹的使用者,我们可以在上面的链接处下载相关文件并引入,也可以利用CDN方式引入: <link href="//cd
-
JS组件Form表单验证神器BootstrapValidator
本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法 来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <sc
-
bootstrapValidator自定验证方法写法
本文实例为大家分享了bootstrapValidator自定验证方法写法,供大家参考,具体内容如下 //表单验证 issueInvoiceForm.validation = function(){ $('#issueInvoiceForm').on('init.field.bv', function(e, data) { var $icon = data.element.data('bv.icon'), options = data.bv.getOptions(), // Entire opti
-
Bootstrap Validator 表单验证
在线演示地址:http://www.shouce.ren/study/api/s/jq--BootstrapValidator--index.html 使用方法,代码如下所示: 1.<form id="defaultForm" method="post" class="form-horizontal" action="target.php"> 2. <div class="form-group&qu
-
实用又漂亮的BootstrapValidator表单验证插件
本文推荐一款twitter做的bootstrapValidator.js,本身bootstrap就是twitter做的,那么使用原配的validator也就更值得信赖.从百度上搜bootstrapValidator会出现很多款,但我只推荐这款: 一.一睹为快 为了简便的介绍,这里只做为空的check. BootstrapValidator官方下载地址 二.资源引用 下载完资源包后,你可以看到如下的目录. 然后把以下三个文件引入到你项目. <link type="text/css"
-
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
BootStrap 是一个强大的前面框架,它用优雅的方式解决了网页问题.最近正在使用其开发网站的表单验证,一点体会记录如下: 注:本文中借鉴了博客Franson 的文章使用bootstrap validator的remote验证代码经验分享(推荐) 一.准备工作 1.你的网站环境中要有 BootStrap,中文网地址:http://www.bootcss.com/ 2.下载BootStrap Validator相关材料,地址:http://bv.doc.javake.cn/ 当然,如果你不想一个
-
利用bootstrapValidator验证UEditor
我们的项目使用了bootstrapValidator来作为前端校验,但是表单里面有一个UEditor,它用bootstrapValidator是没有效果的,为了页面风格统一,只要修修改改咯 首先来看一下修改后的效果 上面的UEditor是我们的业务需要调整成这样的,首先我们我们先把基本的结构写一写 <form style="padding-top:15px;width:100%" id="defaultForm"> <div class="
-
使用bootstrapValidator插件进行动态添加表单元素并校验
一.前言 实际工作中,要实现表单元素的动态增加,并使用bootstrapValidator插件对动态添加的表单元素进行前台校验.在以前的工作中也使用过bootstrapValidator对表单元素进行校验,但涉及到的表单元素都是固定的,所以在页面载入时,对表单元素进行初始化就可以实现.虽然思路很明确,但由于对bootstrapValidator的用法不熟悉,在这个问题上还是浪费了很多时间,现在就把解决方法和功能效果图贴出来,希望对大家有所帮助. 思路:动态添加表单元素,并调用bootstrapV