创建弹出消息

Question

我正在尝试弹出错误消息，例如在html 5中。

例如：

在此代码中，如果我输入的数字小于0或大于5，则会弹出错误信息。

  <input type="number" name="quantity" min="1" max="5"> 

这将是弹出窗口：

所以我想做的是想要显示我自己的自定义消息。  例如，如果用户尝试登录系统并且密码错误，我想弹出“密码错误”，而不显示错误页面（我当前已经完成）。

我该如何实现？

感谢您的时间。

Answer 1

首先，出于安全原因，您不想承认用户名是正确的 - 消息传递应该更加通用，例如“请输入有效的用户名和密码”

另一个考虑因素是如何验证凭据。这可以通过返回JSON结果的简单Web服务来完成。因此，/verifycreds.php?username=John&password=password的请求可能会返回以下内容：

{ success: false, message: "Please enter a valid username and password" }

从那里，表单将使用onSubmit处理程序进行更新，以在提交页面之前验证凭据。对于这个例子，我将使用jQuery - please reference the documentation

$( "#myform" ).submit(function( event ) {
    var verificationURL = "/verifycreds.php?username=" 
                          + $('#username').val() 
                          + "&password=" + $('#password').val();
    $.get(verificationURL, function(data) {
        if(!data.success) {
            event.preventDefault();
            // Display popup of your choice here with data.message
        }
    });
});

这是基本设置。我们正在向#myForm添加一个onSubmit处理程序，我们构建了验证凭据webservice的URL，然后我们处理结果并在验证失败时停止表单提交并显示消息。