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实现提示语淡入效果
May 05 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 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字符串 ==比较运算符的副作用
2009/10/21 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
如何打开php的gd2库
2017/02/09 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
javascript ajax 仿百度分页函数
2013/10/29 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
django ajax json的实例代码
2018/05/29 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
python绘制趋势图的示例
2020/09/17 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
Python实现区域填充的示例代码
2021/02/03 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
在校生党员自我评价
2013/09/25 职场文书
销售高级职员求职信
2013/10/29 职场文书
人事任命书范文
2014/06/04 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
运动会表扬稿
2015/01/16 职场文书
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL