javascript实现密码验证


Posted in Javascript onNovember 10, 2015

本文为大家分享了javascript密码验证的实现方法,欢迎大家阅读。

javascript实现密码验证

javascript实现密码验证javascript实现密码验证

javascript密码验证代码如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>密码验证</title>
 <script src="js/jquery-1.11.1.js"></script>
 <script>
  $(function(){
   $(document).on('blur','input',function(){
    var $password=$('#password').val();
    var $password_again=$('#password_again').val();
     if(!$password){
      $("#password").addClass('redBorder').next('label').show().html('不能为空');;
      return false;
     }else if(!$password_again){
      $("#password_again").addClass('redBorder').next('label').show().html('不能为空');
      return false;
     }else{
      $('input').removeClass('redBorder').next('label').empty();
      if($password_again==$password){
       $("#password,#password_again").next('label').show().html('两次密码一致').addClass('valid');
      }else if($password_again!=$password){
       $("#password,#password_again").addClass('redBorder').next('label').show().html('两次密码不一致').removeClass('valid').addClass('erro');
      }
 
    } 
   })
    
  })
 </script>
 <style>
  .redBorder{
   border: 1px solid red;
  }
  .erro{
   background: url('images/unchecked.gif') no-repeat;
   padding-left: 16px;
  }
  .valid{
   background: url('images/checked.gif') no-repeat;
   width: 16px;
   height: 16px;
  }
 </style>
</head>
<body>
<div>
 <label>
  输入密码:<input type="text" placeholder="输入密码" id="password">
  <label id="password-erro" class="erro" style="display:none;"></label>
 </label>
 <br><br>
 <label>
  验证密码:<input type="text" placeholder="输入相同密码" id="password_again">
  <label id="password-erro" class="erro" style="display:none;"></label>
 </label>
 <br><br>
 <button style="margin-left:80px;">submit</button>
</div> 
</body>
</html>

希望本文对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
JS实现纸牌发牌动画
Jan 19 Javascript
JavaScript编程的单例设计模讲解
Nov 10 #Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 #Javascript
浅谈javascript中replace()方法
Nov 10 #Javascript
使用jQuery获取data-的自定义属性
Nov 10 #Javascript
javascript适合移动端的日期时间拾取器
Nov 10 #Javascript
js图片轮播手动切换效果
Nov 10 #Javascript
JS截取与分割字符串常用技巧总结
Nov 10 #Javascript
You might like
php mysql数据库操作类
2008/06/04 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
php根据年月获取季度的方法
2014/03/31 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
python中的函数用法入门教程
2014/09/02 Python
Python进行数据科学工作的简单入门教程
2015/04/01 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
什么是python类属性
2020/06/10 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
python 获取计算机的网卡信息
2021/02/18 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
公司营业员的工作总结自我评价
2013/10/05 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
道路交通安全实施方案
2014/03/12 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
社区维稳工作方案
2014/06/06 职场文书
教师工作能力自我评价
2015/03/04 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android
Nginx的gzip相关介绍
2022/05/11 Servers
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS