bootstrapValidator.min.js表单验证插件


Posted in Javascript onFebruary 09, 2017

本文实例为大家分享了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 下载地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery tools 系列 scrollable(2)
Sep 06 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
jQuery实现图片左右滚动特效
Apr 20 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 Javascript
vue中的 $slot 获取插槽的节点实例
Nov 12 Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 Javascript
angular中的post请求处理示例详解
Jun 30 Javascript
js 原型对象和原型链理解
Feb 09 #Javascript
AngularJs表单校验功能实例代码
Feb 09 #Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 #Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 #Javascript
简单谈谈Javascript函数中的arguments
Feb 09 #Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 #Javascript
微信小程序之picker日期和时间选择器
Feb 09 #Javascript
You might like
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
php日期操作技巧小结
2016/06/25 PHP
PHP 中常量的知识整理
2017/04/14 PHP
php新建文件的方法实例
2019/09/26 PHP
jquery select下拉框操作的一些说明
2010/04/02 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
python中实现定制类的特殊方法总结
2014/09/28 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
点球小游戏python脚本
2018/05/22 Python
Python理解递归的方法总结
2019/01/28 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
演讲稿怎么写
2014/01/07 职场文书
解放思想演讲稿
2014/09/11 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫