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与其它js(Prototype)库兼容共存
Jul 04 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
javascript实现智能手环时间显示
Sep 18 Javascript
JS实现简单九宫格抽奖
Jun 28 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
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
常用PHP封装分页工具类
2017/01/14 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
layui导航栏实现代码
2017/05/19 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
vue底部加载更多的实例代码
2018/06/29 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
Python中的闭包详细介绍和实例
2014/11/21 Python
Python中IPYTHON入门实例
2015/05/11 Python
详解python之协程gevent模块
2018/06/14 Python
python实现字符串和字典的转换
2018/09/29 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
解决python replace函数替换无效问题
2020/01/18 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
处理textarea中的换行和空格
2019/12/12 HTML / CSS
学生思想表现的评语
2014/01/30 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
售房协议书
2014/08/19 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
单位租车协议书
2015/01/29 职场文书
质量整改通知单
2015/04/21 职场文书
《海上日出》教学反思
2016/02/23 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android
win10如何开启ahci模式?win10开启ahci模式详细操作教程
2022/07/23 数码科技