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 相关文章推荐
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
用vue 实现手机触屏滑动功能
May 28 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 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桌面中心(一) 创建数据库
2007/03/11 PHP
用PHP实现维护文件代码
2007/06/14 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
基于Django的ModelForm组件(详解)
2017/12/07 Python
python实现接口并发测试脚本
2019/06/25 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
python 实现list或string按指定分段
2019/12/25 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
降低python版本的操作方法
2020/09/11 Python
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
如何现实servlet的单线程模式
2014/08/05 面试题
企业行政文员岗位职责
2013/12/03 职场文书
招股说明书范本
2014/05/06 职场文书
环保标语大全
2014/06/12 职场文书
二婚主持词
2015/06/30 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS