jquery判断输入密码两次是否相等

Jquery easyui是一个非常好的ui框架,但是表单验证中没有最常用的判断两个输出框中值相等的验证,所以我做了下扩展。

$.extend($.fn.validatebox.defaults.rules, {
  /*必须和某个字段相等*/
  equalTo: {
    validator:function(value,param){
      return $(param[0]).val() == value;
    },
    message:'字段不匹配'
  } 

});

使用示例:

密码: <input id="password" name="password" validType="length[4,32]" class="easyui-validatebox" required="true" type="password" value=""/>
<br/>
确认密码:<input type="password" name="repassword" id="repassword" required="true" class="easyui-validatebox" validType="equalTo['#password']" invalidMessage="两次输入密码不匹配"/>

将validType属性指定为equalTo['#password']即可。
当然使用这个小插件,必须要先引用jquery easyui的js库。

使用jQuery.validate验证表单中两次密码是否一致的时候遇到了一点小问题,这是我编写的代码:

$("#aspnetForm").validate({
        rules: {
          txtName: {
            required: true
          },
          txtTrueName: {
            required: true
          },
          txtPass: {
            required: true,
            minlength: 3
          },
          txtTwoPass: {
            required: true,
            minlength: 3,
            equalTo: "#txtPass"
          },
          txtEmail: {
            required: true,
            email: true
          },
          txtAddress: {
            required: true
          },
          txtPhone: {
            required: true
          }
        },
        messages: {
          txtName: {
            required: "*请输入用户名"
          },
          txtTrueName: {
            required: "*请输入姓名"
          },
          txtPass: {
            required: "*请输入密码",
            minlength: "*密码不能小于3个字符"
          },
          txtTwoPass: {
            required: "*请输入确认密码",
            minlength: "*密码不能小于3个字符",
            equalTo: "*请再次输入相同的值"
          },
          txtEmail: {
            required: "*请输入邮箱",
            email: "*请输入正确的邮箱格式"
          },
          txtAddress: {
            required: "*请输入地址"
          },
          txtPhone: {
            required: "*请输入手机号码"
          }
        }
      });

为什么明明我输入的两次密码是一致的还一直提示我呢?试过不同的浏览器和不同版本的validate都是如此。

不知道大家有没有遇到类似的问题,我查阅了许多文章,总结了一下解决问题的思路:

  • 先去去查看html页面的两个password型是否都赋值id了。
  • 或者检索下页面是否存在两个txtPass的id。
  • 或者你先将equalTo去掉,在重新验证下,看看是否有存在其他错误,没有在倒回来排查这个地方。

希望这篇文章可以给大家一些启发,谢谢大家的阅读,小编一定会再接再厉。

(0)

相关推荐

  • IE下支持文本框和密码框placeholder效果的JQuery插件分享

    很久之前写了这个插件,基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框. placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示显示在文本框中,当文本框获得焦点时,提示文字消失. 下载地址:http://xiazai.jb51.net/201501/other/placeholderfriend.rar 实现代码如下: 复制代码 代码如下: (function($) {   /**    * 没有开花

  • JQuery记住用户名和密码的具体实现

    复制代码 代码如下: <div> <input id="username" type="text" class="txt1" value="请输入用户名" onclick="if(this.value=='请输入用户名'){this.value=''; }" onfocus="if(this.value=='请输入用户名'){this.value=''; }" />

  • 使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)

    需要引入插件jquery.md5.js 可直接在IIS下运行: 用户名:Ethan.zhu 密 码:123456789 完整文件下载:WebApplication1_jb51.rar 首先将按钮单击事件的异步验证提取出来作为一个单独的函数,需要将按钮单击事件里面的变量提取出来定义为全局变量,并且增加一个变量editPass(用来标记是自己输入密码,还是从cookies中读取的密码) 复制代码 代码如下: var wrongTypeName, //用户名的错误类型,可以直接作为错误提示信息数组的下

  • 基于JQuery的密码强度验证代码

       因为是基于JQuery的控件,当然需要JQuery库,还要一个本控件的JS.JQuery的JS大家可以到官网下载:http://code.jquery.com/jquery-1.4.2.min.js 这个控件的JS文件:password_strength_plugin.js password_strength_plugin.js 复制代码 代码如下: (function($){ $.fn.shortPass = 'Too short'; $.fn.badPass = 'Weak'; $.f

  • jQuery实现6位数字密码输入框

    下个月就要过年了,感觉有点瞎忙.翻了翻博客,感觉这个月都在打酱油啊.借口那么多,其实真的有点懒了,呵呵! 我争取在放假前,将自我总结以及来年计划发出来,把自己打造为勉族,不然真要浑噩度日了. 前几天,项目有个功能和某宝购物支付密码的输入框有点类似,就自己写了这篇博文,权当总结笔记吧. 啰嗦半天了,直接上代码: 结构层: <div> <div>请在下方输入6位数字</div> <div class="ipt-box-nick"> <i

  • jQuery Easyui 验证两次密码输入是否相等

    什么是 jQuery EasyUI jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点. easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件. easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能. 使用 easyui,您不需要写太多 javascript 代码,一般情况下您只需要使用一些 html 标记来定义用户界面. HTML 网页的完整框架. easyui 节省了开发产品的时间和规模. easyui 非常简单,但是

  • jquery 实现密码框的显示与隐藏示例代码

    复制代码 代码如下: <html> <head> <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#chk").bind({ click: function(){ if($(this).

  • jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    复制代码 代码如下: //初始化页面时验证是否记住了密码 $(document).ready(function() { if ($.cookie("rmbUser") == "true") { $("#rmbUser").attr("checked", true); $("#user").val($.cookie("userName")); $("#pass").va

  • JQuery记住用户名密码实现下次自动登录功能

    Jquery将用户名密码存储到cookie中 需要导入jquery.js和jquery.cookie.js <html> <head> <title>test cookie</title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="Scripts/

  • jquery 手势密码插件

    效果图: 代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <!--<link rel="stylesheet" href="../dist/css/danmuplayer.css" rel="external no

随机推荐