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


Posted in Javascript onApril 22, 2020

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去掉,在重新验证下,看看是否有存在其他错误,没有在倒回来排查这个地方。

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

Javascript 相关文章推荐
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
AJAX实现省市县三级联动效果
Oct 16 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 #Javascript
Jqgrid之强大的表格插件应用
Dec 02 #Javascript
整理Javascript事件响应学习笔记
Dec 02 #Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 #Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 #Javascript
原生JavaScript实现异步多文件上传
Dec 02 #Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 #Javascript
You might like
php 获得汉字拼音首字母的函数
2009/08/01 PHP
php防盗链的常用方法小结
2010/07/02 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
vue + element-ui的分页问题实现
2018/12/17 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
银行学习十八大感想
2014/01/11 职场文书
会计岗位描述
2014/02/22 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
租车协议书范本
2014/04/22 职场文书
委托书的写法
2014/09/16 职场文书
基层党员对照检查材料
2014/09/24 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
《雷雨》教学反思
2016/02/20 职场文书
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python
Opencv中cv2.floodFill算法的使用
2021/06/18 Python