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 表单的友好用户体现
Jan 07 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
深入理解JavaScript的值传递和引用传递
Oct 24 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调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
Python使用爬虫猜密码
2016/02/19 Python
Python AES加密实例解析
2018/01/18 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
python获取代理IP的实例分享
2018/05/07 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
python+os根据文件名自动生成文本
2019/03/21 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
草莓网官网:StrawberryNET
2019/08/21 全球购物
消防器材管理制度
2014/01/28 职场文书
培训自我鉴定
2014/01/31 职场文书
安全教育演讲稿
2014/05/09 职场文书
找工作求职信
2014/07/07 职场文书
2015年读书月活动总结
2015/03/26 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python
SQL SERVER中的流程控制语句
2022/05/25 SQL Server