手动触发ko验证错误

Question

此电子邮件表单具有前端验证，仅检查其是否包含'@'。如果失败，它将打开错误消息'错误的格式'。

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

如果ajax结果作为ValidationError返回，这意味着它未能通过后端“有效模式”测试。在这种情况下，我想手动触发现有的前端“错误模式”错误消息。

如何从JavaScript内做到这一点？有没有可以在“case ValidationError：”中设置的变量或标志，它会这样做？

我的形式：

<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返回一个数据对象，指示是否提交了SUCESSFUL与否：

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); 
      } 
     }); 
    }