easyUI的验证案例(修改密码)

最新推荐文章于 2021-03-28 10:24:03 发布

原创最新推荐文章于 2021-03-28 10:24:03 发布 · 2.4k 阅读

3 ·

CC 4.0 BY-SA版权

easyUI 专栏收录该内容

4 篇文章

订阅专栏

本文展示了如何使用easyUI库进行密码验证。通过创建输入框并设置验证规则，确保新密码和确认密码的长度在3到6位之间。当点击确认按钮时，验证密码是否匹配，并通过AJAX发送数据到服务器，模拟密码修改操作。如果验证和服务器响应成功，则关闭窗口，否则显示相应的错误提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.输入框:

<div class="easyui-layout" fit="true">
            <div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
               <form id="editPasswordForm">
                    <table cellpadding=3>
                        <tr>
                            <td>新密码：</td>
                            <td><input required="true" data-options="validType:'length[3,6]'" id="txtNewPass" type="Password" class="txt01 easyui-validatebox" /></td>
                        </tr>
                        <tr>
                            <td>确认密码：</td>
                            <td><input required="true" data-options="validType:'length[3,6]'" id="txtRePass" type="Password" class="txt01 easyui-validatebox" /></td>
                        </tr>
                    </table>
                </form>
            </div>
            <div region="south" border="false" style="text-align: right; height: 30px; line-height: 30px;">
                <a id="btnEp" class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)" >确定</a>
                <a id="btnCancel" class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)">取消</a>
            </div>
        </div>

2.验证:

$("#btnEp").click(function(){
           var v = $("#editPasswordForm").form("validate");
           if(v){
               var v1 = $("#txtNewPass").val();
               var v2 = $("#txtRePass").val();
               if(v1 == v2){
                   $.post(
                       "userAction_editPassword.action",
                       {"password":v1},
                       function(data){
                           if(data == '1'){
                               //修改成功，关闭修改密码窗口
                               $("#editPwdWindow").window("close");
                           }else{
                               //修改密码失败，弹出提示
                               $.messager.alert("提示信息","密码修改失败！","error");
                           }
                       },
                       "json"
                   );
               }else{
                   //两次输入不一致，弹出错误提示
                   $.messager.alert("提示信息","两次密码输入不一致！","warning");
               }
           }
       });