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 Array Flatten 与递归使用介绍
Oct 30 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
js调用屏幕宽度的简单方法
Nov 14 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
javascript实现多边形碰撞检测
Oct 24 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 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
Zerg剧情介绍
2020/03/14 星际争霸
PHP4在Windows2000下的安装
2006/10/09 PHP
php中神奇的fastcgi_finish_request
2011/05/02 PHP
php常用正则函数实例小结
2016/12/29 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
YII框架http缓存操作示例
2019/04/29 PHP
javascript 模拟点击广告
2010/01/02 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
Python for Informatics 第11章之正则表达式(四)
2016/04/21 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
校车安全责任书
2014/08/25 职场文书
领导干部作风建设总结
2014/10/23 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
介绍信如何写
2015/01/31 职场文书
写给老师的保证书
2015/05/09 职场文书
学历证明样本
2015/06/16 职场文书
消夏晚会主持词
2015/06/30 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
Python基础之数据结构详解
2021/04/28 Python
python面向对象版学生信息管理系统
2021/06/24 Python
MySQL数据库查询之多表查询总结
2022/08/05 MySQL