使用Data Annotations和JavaScript進行模型/表單驗證

我想在我的ASP MVC應用程序上實現數據驗證。我目前使用的數據註釋是這樣的：使用Data Annotations和JavaScript進行模型/表單驗證

[Required] 
public string UserName { get; set; }

這會再變成像

<input type='text' ... data-required>

我可以罰款使用jQuery不顯眼的驗證驗證它，但是，這個項目沒有jQuery的。它是從Javascript直接構建的，我們計劃保持這種狀態。

有沒有什麼辦法可以做到這一點沒有jQuery？

來源

2016-06-29 FerX32

[必填]表示當表單發佈時它將由MVC框架驗證。如果你想要客戶端驗證，我想你必須寫在JavaScript中。 – Ian

數據驗證可以在JS中使用[egkyron]（https：// github。COM/nikospara/egkyron）。有了它，您就可以爲模型定義驗證規則，而不是像服務器端那樣定義UI。您將不得不在egkyron生成的驗證結果和UI之間實現綁定以顯示消息。 'src/examples'可以幫助你（儘管它們是用於Angular和React的）。如果你能提供更多的信息，我可以創建一個小提琴。你使用/你使用了哪些客戶端庫？是否應該/允許使用？ –

什麼使用，而不是jquery.type腳本，Java腳本或其他？ –

因此，根據評論，有一些庫在Javascript中實現模型驗證。我寫了一個，Egkyron，並在我的工作中使用它。使用這些庫，您可以爲模型定義驗證規則，而不是像服務器端那樣定義UI。

承擔JS定義爲User模式：

function User() { 
    this.userName = null; 
    this.password = null; 
    this.passwordVerification = null; 
}

您可以定義其驗證規則JS註解相當於：

User.validators = { 
    // key is property name from the object; value is the validation rules 
    userName: [ 
    // the userName is required... 
    'required', 
    // ...and some arbitrary rules for demonstrating: 
    // "the user name starts with a lower-case letter and consists only of lower-case letters and numbers" 
    ['regexp', {re: /^[a-z][a-z0-9]*$/}], 
    // "the length of the user name is between 5 and 8 characters (inclusive)" 
    ['length', {min: 5, max: 8}] 
    ] 
};

如果使用巴貝爾或打字稿，你可以檢查出裝飾器，ES7規範的建議。一個TS類可以被註釋爲：

class User { 
    @Required() 
    @RegExp(/^[a-z][a-z0-9]*$/) 
    @Length({min: 5, max: 8}) 
    userName: string; 
    ... 
}

這是非常接近你在使用Java或C＃服務器端寫什麼。事實上，在以前的項目中，我們生成了的JS類+來自服務器端C＃類的驗證規則。

然後，假設你得到User對象的保持，你可以用Egkyron驗證它爲：

var validator = new egkyron.Validator(/* see the example for constructor arguments */); 
var user = ...; // instance of a User 
var validationResult = validator.validate(user).result;

驗證器是可重複使用的;如果user = new User()的的ValidationResult的樣子：

{ // validation result for the given User 
    _thisValid: true, // no validation rules of **this** object failed 
    _validity: null, // there are no validation rules for this object (only for its properties) 
    _childrenValid: false, // its properties and/or children objects are invalid 
    _children: {  // detailed report of its children objects/properties 
     userName: { // child property name 
      _thisValid: false, // the userName is invalid (required but not given) 
      _children: null, // terminal node, no children 
      _validity: { // detailed report about each validation rule 
       required: { isValid: false, ... }, // the "required" constraint failed 
       regexp: { isValid: true, ... }, // empty value => regexp validity defaults to true 
       length: { isValid: true, ... }  // empty value => length validity defaults to true 
      } 
     }, 
     ... 
    } 
}

具有了驗證結果，您可能希望將其呈現給UI。有很多不同的要求和微小的變化。我相信不可能滿足所有這些。即使我們能夠滿足他們，圖書館的規模也將是巨大的，而且很可能，圖書館本身並不是真正可用的。

因此，Egkyron將UI集成留給了用戶。有一些例子，我會很樂意回答任何問題。

除了examples，這裏是一個plunk與上面的普通瀏覽器JS例子。

來源

2016-07-01 08:18:01

如果您想要客戶端驗證，您必須編寫自己的數據庫庫 - ****標籤來驗證輸入或考慮添加JQuery Unobtrusive驗證。

來源

2016-06-29 09:58:37

什麼使用，而不是jquery.type腳本，Java腳本或等？ –

@MohsenZahedi爲什麼？ –

所以，爲顯示需要一個語言的用戶界面，例如jQuery的JavaScript類型腳本或等 –

使用Data Annotations和JavaScript進行模型/表單驗證

回答

相關問題