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 相关文章推荐
javascript document.execCommand() 常用解析
Dec 14 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
d3.js实现图形拖拽
Dec 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
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
php socket方式提交的post详解
2008/07/19 PHP
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
python基于multiprocessing的多进程创建方法
2015/06/04 Python
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
Python找出最小的K个数实例代码
2018/01/04 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
python读取Excel实例详解
2018/08/17 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
Numpy之reshape()使用详解
2019/12/26 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
群众路线剖析材料
2014/09/30 职场文书
鲁冰花观后感
2015/06/10 职场文书
高中运动会前导词
2015/07/20 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS