jQuery UI 对话框 + 验证

使用jQuery UI对话框和验证创建强大的用户界面

html

html
    
这是一个简单的对话框。

javascript
$(document).ready(function () {
    $("#my-dialog").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            "关闭": function () {
                $(this).dialog("close");
            }
        }
    });
});

html

html
    用户名：
    
    
    密码：
    
    
    提交

javascript
$(document).ready(function () {
    $("#my-form").validate({
        rules: {
            username: "required",
            password: "required"
        },
        messages: {
            username: "请输入用户名",
            password: "请输入密码"
        }
    });
    $("#submit-btn").click(function () {
        if ($("#my-form").valid()) {
            // 验证通过，执行相应的操作
            $("#my-dialog").html("
表单验证通过！
");
            $("#my-dialog").dialog("open");
        }
    });
});