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实现的简单无刷新评论功能示例
Nov 08 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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
php+oracle 分页类
2006/10/09 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
php实现websocket实时消息推送
2018/03/30 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
Python常用小技巧总结
2015/06/01 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
简单介绍Object类的功能、常用方法
2013/10/02 面试题
大学生简短的自我评价分享
2014/02/20 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
松材线虫病防治方案
2014/06/15 职场文书
4s店活动策划方案
2014/08/25 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
自查自纠工作总结
2014/10/15 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
春节慰问简报
2015/07/21 职场文书
上班旷工检讨书
2015/08/15 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python