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获取距今n天前的日期
Jul 08 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 Javascript
JS如何判断对象是否包含某个属性
Aug 29 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世纪万年历
2006/12/06 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
php5与php7的区别点总结
2019/10/11 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
Vue运用transition实现过渡动画
2019/05/06 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
基于Python os模块常用命令介绍
2017/11/03 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
Python线程同步的实现代码
2018/10/03 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
30年同学聚会邀请函
2014/01/25 职场文书
电钳工人个人求职信
2014/05/10 职场文书
小学班主任评语
2014/12/29 职场文书
法院执行局工作总结
2015/08/11 职场文书
离婚财产分割协议书
2015/08/11 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技