EasyUI 扩展验证控件规则

最新推荐文章于 2024-10-29 10:14:38 发布

永远爱好写程序

最新推荐文章于 2024-10-29 10:14:38 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Asp.Net_项目开发技巧

本文链接：https://blog.youkuaiyun.com/limlimlim/article/details/10304887

Asp.Net_项目开发技巧专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一种使用EasyUI框架实现两次密码输入一致性的验证方法。通过扩展validatebox组件的验证规则，确保用户两次输入的密码相同。此方法适用于需要加强用户注册或修改密码流程的Web应用。

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

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="扩展验证控件(两次密码相同).aspx.cs"
Inherits="MyStartEasyUi.扩展验证控件_两次密码相同_" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title></title>
    <%--    <script src="jquery-easyui-1.3.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>--%>
    <script src="jquery-easyui-1.3.4/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="jquery-easyui-1.3.4/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <link href="jquery-easyui-1.3.4/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="jquery-easyui-1.3.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #tblLogin
        {
            margin: 25px auto;
        }
        #tblLogin input
        {
            width: 200px;
        }
        #tblLogin th
        {
            text-align: right;
        }
        #tblLogin th, #tblLogin td
        {
            padding: 6px;
        }
    </style>
    <script type="text/javascript">
        var loginAndRegDialog;
        $(function () {
            loginAndRegDialog = $('#LoginAndRegDialog').dialog({
                closable: false,      //取消关闭按钮
                modal: true,            //使用遮盖
                buttons: [{
                    text: "登录", iconCls: "icon-ok", handler: function () {
                        if ($("#form1").form('validate')) {          //表单form验证通过才执行相应代码,调用validate方法
                            loginAndRegDialog.dialog('close');
                            $.messager.show({ showType: 'slide', title: '提示', msg: '你按下了登录' })
                        }
                    }
                },
                { text: "取消", iconCls: "icon-cancel", handler: function () {
                    $.messager.alert('提示', '你按下了取消');
                }
                }]
            });
        });
        //使用一下格式来扩展方法，参考EasyUI API
        $.extend($.fn.validatebox.defaults.rules, {
            eqPassword: {    /*验证两次密码输入一致*/
                validator: function (value, param) {
                    //console.info(value);
                    //console.info($(param[0]).val());
                    //param[0]为外面传入的密码框的ID     #form1 input[name=txtPassword]
                    return value == $(param[0]).val();
                },
                message: '两次密码输入不一致'
            }
        });
    </script>
</head>
<body>
    <div id="LoginAndRegDialog" title="用户登录" style="width: 400px; height: 230px;">
        
        <form id="form1" runat="server">
        <table id="tblLogin">
            <tr>
                <th>
                    用户名:
                </th>
                <td>
                    <input type="text" class="easyui-validatebox" required="true" missingmessage="用户名为必填项"
                        name="txtUserName" />
                </td>
            </tr>
            <tr>
                <th>
                    密码:
                </th>
                <td>
                    <input type="password" class="easyui-validatebox" required="true" missingmessage="密码为必填项"
                        name="txtPassword" />
                </td>
            </tr>
            <tr>
                <th>
                    确认密码:
                </th>
                <td>
                    <input type="password" class="easyui-validatebox" required="true" missingmessage="确认密码为必填项"
                        name="txtPassword2" validtype="eqPassword['#form1 input[name=txtPassword]']" />
                </td>
            </tr>
        </table>
        </form>
    </div>
</body>
</html>