easyui 判断密码是否输入一致

最新推荐文章于 2021-01-13 19:49:10 发布

12程序猿

最新推荐文章于 2021-01-13 19:49:10 发布

阅读量263

点赞数

分类专栏：前端UI

原文链接：https://www.cnblogs.com/GumpYan/p/7592908.html

版权

前端UI 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.首先要扩展validatebox，添加验证两次密码功能

$.extend($.fn.validatebox.defaults.rules, {  
            eqPassword:{  
            validator:function(value, param) {  
                return value == $(param[0]).val();  
            },  
            message : '密码不一致！'  
        }  
    });

2.在HTML中要引入eqPassword函数

<form id="modifyPwdForm" method="post">
            <input name="ids" type="hidden" />
            <table class="tableForm">
                <tr>
                    <th>新密码:</th>
                    <td><input name="cpwd" type="password" class="easyui-validatebox" required="true" missingMessage="请填写新密码" /></td>

                </tr>
                <tr>
                    <th>确认密码:</th>
                    <td><input name="recpwd" type="password" class="easyui-validatebox" required="true" missingMessage="请再次填写新密码" validType="eqPassword['#modifyPwdForm input[name=cpwd]']" /></td>
                </tr>
            </table>
        </form>

源码：

<!DOCTYPE html>
<html>
  <head>
    <title>password.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
  
   <link rel="stylesheet" href="../easyui/themes/default/easyui.css" type="text/css"></link>
   <link rel="stylesheet" href="../easyui/themes/icon.css" type="text/css"></link>
    
    <script>
        $.extend($.fn.validatebox.defaults.rules, {  
            eqPassword:{  
            validator:function(value, param) {  
                return value == $(param[0]).val();  
            },  
            message : '密码不一致！'  
        }  
    });
    </script>
  </head>
  
  <body>
    <form id="modifyPwdForm" method="post">
            <input name="ids" type="hidden" />
            <table class="tableForm">
                <tr>
                    <th>新密码:</th>
                    <td><input name="cpwd" type="password" class="easyui-validatebox" required="true" missingMessage="请填写新密码" /></td>

                </tr>
                <tr>
                    <th>确认密码:</th>
                    <td><input name="recpwd" type="password" class="easyui-validatebox" required="true" missingMessage="请再次填写新密码" validType="eqPassword['#modifyPwdForm input[name=cpwd]']" /></td>
                </tr>
            </table>
        </form>    
  </body>
</html>