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 相关文章推荐
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
js 调用百度分享功能
Feb 27 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
基于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
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
不错的一篇面向对象的PHP开发模式(简写版)
2007/03/15 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
小谈php正则提取图片地址
2014/03/27 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
Python函数和模块的使用总结
2019/05/20 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
详解Python3中的 input() 函数
2020/03/18 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
不假外出检讨书
2014/01/27 职场文书
情人节活动策划方案
2014/02/27 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
运动会三级跳加油稿
2015/07/21 职场文书