jQuery表单验证之密码确认


Posted in jQuery onMay 22, 2017

众所周知,在修改密码时会需要两次输入密码。这时如何确保两个密码框中都有内容?两个密码框中是一致的?如果一个没有输入会给出提示?OK这一切都可以用JS来实现,具体思想很简单啦,就是编写事件获取dom节点,判断对象的取值呀?
那么编写什么事件?应该是onblur事件~。而且要为两个密码框都加上失去焦点的blur事件。利用jQuery比较方便勒。
话不多说,直接上代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>password验证</title>
    <script src="jquery/jquery-3.1.1.min.js" type="text/javascript"></script>
  </head>
  <body>
      <form ation="psot" method="">
      <label for="password1">请输入密码:</label>
      <input id="password" name="password" onblur="checkpas1();" required="true" type="password"/>
<br/>
      <label for="password1">请确认密码:</label>
      <input type="password" name="repassword" id="repassword" required="true" onChange="checkpas();" />
      <span class="tip" style="color: red;">两次输入的密码不一致</span><br>
      <input type="button" name="submit" value="提交" onclick="checkpas2();"/>
    </form>
    <script>
      $(".tip").hide();
      function checkpas1(){//当第一个密码框失去焦点时,触发checkpas1事件
        var pas1=document.getElementById("password").value;
        var pas2=document.getElementById("repassword").value;//获取两个密码框的值
        if(pas1!=pas2&&pas2!="")//此事件当两个密码不相等且第二个密码是空的时候会显示错误信息
          $(".tip").show();
        else
          $(".tip").hide();//若两次输入的密码相等且都不为空时,不显示错误信息。
        }
      function checkpas(){//当第一个密码框失去焦点时,触发checkpas2件
        var pas1=document.getElementById("password").value;
        var pas2=document.getElementById("repassword").value;//获取两个密码框的值
        if(pas1!=pas2){
          $(".tip").show();//当两个密码不相等时则显示错误信息
        }else{
          $(".tip").hide();
        }
        }
      function checkpas2(){//点击提交按钮时,触发checkpas2事件,会进行弹框提醒以防无视错误信息提交
        var pas3=document.getElementById("password").value;
        var pas4=document.getElementById("repassword").value;
        if(pas3!=pas4){
          alert("两次输入的密码不一致!");
          return false;
        }
      }
    </script>
  </body>
</html>
</html>

希望大家能去理解代码,其实还是比较简单的,多写写就会了。我也是才上手的。说的不对的,希望大佬指出来

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

jQuery 相关文章推荐
jQuery Plupload上传插件的使用
Apr 19 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 #jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 #jQuery
关于jQuery库冲突的完美解决办法
May 20 #jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 #jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 #jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 #jQuery
jQuery操作之效果详解
May 19 #jQuery
You might like
业余方法DIY电子管FM收音机
2021/03/02 无线电
php实现学生管理系统
2020/03/21 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
个人简历自我评价
2014/01/06 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
公司股份合作协议书
2014/12/07 职场文书
优秀党员推荐材料
2014/12/18 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
七夕情人节问候语
2015/11/11 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
DIY胆机必读:各国电子管评价
2022/04/06 无线电