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 prototype属性使用说明
May 13 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 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
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
js实现放大镜特效
2017/05/18 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
React-Native中props具体使用详解
2017/09/04 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
用python写asp详细讲解
2013/12/16 Python
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
财务部总监岗位职责
2014/03/12 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
群众路线表态发言材料
2014/10/17 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
销售口号霸气押韵
2015/12/24 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
vue实现登陆页面开发实践
2022/05/30 Vue.js