Question

此电子邮件表单具有前端验证，仅检查其是否包含＆＃39; @＆＃39;。如果失败，则会打开错误消息＆＃39;格式错误＆＃39;。

如果它通过，那么ajax调用会命中一个后端API端点，它会对它执行更严格的正则表达式。即foo @ bar将通过前端验证但未通过后端验证。

如果ajax结果以ValidationError的形式返回，则表示它的后端“有效模式”失败了。测试。在这种情况下，我想手动触发现有的前端“坏模式”。错误信息。

如何在javascript中执行此操作？是否存在我可以在＆＃34;案例中设置的变量或标志ValidationError：＆＃34;会这样做吗？

我的表格：

<form novalidate data-bind="submit: onRegister">
<div class="input-wrapper email" data-bind="validationElement: EmailAddress, css: { 'validation-success': EmailAddress.isModified() && EmailAddress.isValid() }">
    <label for="registerModalEmail">@AuthenticationStrings.EmailLabel</label>
    <input type="email" placeholder="Email" id="registerModalEmail" name="EmailAddress" data-bind="value: EmailAddress" required />
</div>  
<div class="validation-error-message" id="email-address-error" data-bind="validationMessage: EmailAddress"></div>
<button>Create Account</button>

我的剧本：

self.EmailAddress = ko.observable().extend({
    required: {
        params: true,
        message: 'Please provide an email'
    },
    pattern: {
        /**
            * Email validation is crazy, so just checking for @ symbol on front end.
            * Back end will use a more complex regex.
            */
        params: '@',
        message: 'Bad pattern'
    },
    validation: {
        async: true,
        validator: function (val, parms, callback) {
            $.ajax({
                url: '/isEmailAllowed',
                data: { 'EmailAddress': val },
                type: 'POST',
                success: function (results) {
                    if (results) {
                        switch (results.result) {
                        case "Valid":
                            callback(true); // email is unique
                            break;
                        case "ValidationError":
                            // email is malformed
                            // might be caught by front-end but can slip through
                            break;
                        default:
                            callback(false);// unknown error
                        }
                    }
                }//,
                //error: function (xhr) {
                //    if (xhr) {
                //        switch (xhr.statusText) {
                //        case "Conflict":
                //            callback(false); // show dupe email message
                //            break;
                //        default:
                //            callback(true); // defeat usual error message
                //            // trigger invalid email error
                //        }
                //    }
                //}
            });
        },
        message: 'This email exists. Sign in instead.'
    }
});

Answer 1

首先，尝试使用电子邮件验证规则.extend({email:true}):，您将获得正常的电子邮件验证功能：）

如果您仍想进行外部验证，请查看异步规则，因为它们是为处理此案例而设置的：https://github.com/Knockout-Contrib/Knockout-Validation/wiki/Async-Rules

Answer 2

如果验证不是您提交方法的一部分，那么您仍然在进行客户端验证。我倾向于同意使用本机knockout.js电子邮件规则在功能上是等效的。

如果您在提交方法中构建验证，那么您将获得客户端无法绕过验证的额外安全性。

让您的webmethod返回一个数据对象，指示提交是否成功：

    public class JSONResponse
    {
        public JSONResponse()
        {
            ErrorLevel = (int)Enums.ErrorLevel.SUCCESS;
        }

        public object Data { get; set; }
        public string BasicErrorMessage { get; set; }
        public int ErrorLevel { get; set; }
    }

    [WebMethod]
    public static JSONResponse SubmitEmail(string emailAddress)
    {
        var response = new JSONResponse();
        try
        {
            if (validateEmail(emailAddress))
            {
                SubmitEmail(emailAddress);
            }
            else
            {
                response.ErrorLevel = (int)PDSI.PRISM.DataObjects.Enums.ErrorLevel.FATAL;
                response.BasicErrorMessage = "Email format is incorrect";
            }

            return response;
        }
        catch (Exception ex)
        {
            response.ErrorLevel = (int)PDSI.PRISM.DataObjects.Enums.ErrorLevel.FATAL;
            response.BasicErrorMessage = "Unhandled error";
        }
    }

客户端知道如何根据从服务器传回的错误级别来执行操作：

    self.EmailAddress = function()
    {
        var callback = function (response) {
            if (response.ErrorLevel == ErrorLevel.SUCCESS) {
                //yay cake, move to next screen?
            }
            else {
                alert(response.BasicErrorMessage);
            }
        };

        $.ajax({
            url: '/SubmitEmail',
            data: { 'emailAddress': val },
            type: 'POST',
            success: function (response) {
                callack(response);
            }
        });
    }

手动触发ko验证错误

2 个答案: