奧裏利亞驗證 - 不進行驗證失敗

我已經通過奧裏利亞驗證例如工作顯示消息，我有以下幾點：奧裏利亞驗證 - 不進行驗證失敗

的index.html

<!doctype html> 
<html> 
<head> 
    <title>Aurelia</title> 
    <link rel="stylesheet"href="styles/styles.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body aurelia-app="main"> 
    <script src="jspm_packages/system.js"></script> 
    <script src="config.js"></script> 
    <script> 
     System.import('aurelia-bootstrapper'); 
    </script> 
</body> 
</html>

歡迎。 JS

import {Validation} from 'aurelia-validation'; 

export class Welcome{ 
    static inject() { return [Validation]; } 
    constructor(validation) { 
    this.heading = 'Welcome to the Aurelia Navigation App!'; 
    this.firstName = 'John'; 
    this.lastName = 'Doe'; 

this.validation = validation.on(this) 
    .ensure('firstName') 
    .isNotEmpty() 
    .hasMinLength(3) 
    .hasMaxLength(10) 
.ensure('lastName') 
    .isNotEmpty() 
    .hasMinLength(3) 
    .hasMaxLength(10); 
    } 

    get fullName() { 
    return `${this.firstName} ${this.lastName}`; 
    } 

    welcome() { 
    this.validation.validate()//validate will fulfill when validation is valid and reject if not 
     .then(() => { 
      alert(`Welcome, ${this.fullName}!`); 
    }) 
     .catch(() => { 
      console.log("validation error"); 
     }); 
    } 
}

welcome.html個

<template> 
<require from="bootstrap/css/bootstrap.css"></require> 
<require from="font-awesome/css/font-awesome.css"></require> 
<section style="padding-top:2%;"> 
    <h2 class="text-center">${heading}</h2> 
    <form role="form" submit.delegate="welcome()" validate.bind="validation"class="form-horizontal"> 
    <div class="form-group">  
     <label class="control-label col-sm-2" for="firstName">First Name:</label> 
     <p style="help-block aurelia-validation-message"></p> 
     <div class="col-sm-10"> 
       <input id="firstName" type="text" value.bind="firstName" class="form-control"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-sm-2" for="lastName">Last Name:</label> 
     <div class="col-sm-10"> 
      <input id="lastName" type="text" value.bind="lastName" class="form-control"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-sm-2">Full Name:</label> 
     <div class="col-sm-10"> 
      <p>${fullName}</p> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-offset-2 col-sm-10"> 
      <button type="submit" class="btn btn-default">Submit</button> 
     </div> 
    </div> 
    <hr class="half-rule"> 
</form> 
</section> 
</template>

main.js

import{ValidateCustomAttributeViewStrategy} from 'aurelia-validation'; 

export function configure(aurelia) { 
    aurelia.use 
    .standardConfiguration() 
    .developmentLogging() 
    .plugin('aurelia-validation', (config) => 
{config.useViewStrategy(ValidateCustomAttributeViewStrategy.TWBootstrapAppendToInput);}); //Add this line to load the plugin 

    aurelia.start().then(a => a.setRoot('app', document.body)); 
}

現在，我認爲加入ValidateCustomAttributeViewStrategy會自動在相應的輸入區填寫錯誤消息，但它似乎並沒有做任何事情。相反，只要我點擊提交，我會在瀏覽器控制檯Unhandled promise rejection > ValidationResult中收到2個錯誤。這些會有關係嗎？另外，我是否需要爲每個輸入添加p個元素以便消息填充或者是否應該自動完成？

編輯：我已經注意到在瀏覽器控制檯中，沒有任何調試消息表示aurelia-validation插件已被加載。我導航到我的應用程序項目文件夾和jspm install aurelia-validation，併成功安裝。它也存在於我的config.js中。它位於jspm_packages/npm/[email protected]。它似乎仍然不工作

來源

2015-11-26 jbailie1991

我通過aurelia驗證源挖了一點，發現ValidateCustomAttributeViewStrategy.TWBootstrapAppendToInput的唯一提及是在Intro documentation。這個類和它們的靜態成員似乎被重命名。您可以使用新的靜態成員來代替TWBootstrapViewStrategy.AppendToInput。它可以在TWBootstrapViewStrategyBasesource code中找到。

有一個pull request爲那應該被合併到主分支，但是Intro.md仍然包含舊的配置。

P.S.你不需要添加p元素。這將被自動處理。

P.P.S.在致電validation.validate()時，您還需要need to have.catch來處理所有失敗的驗證。這將防止你在控制檯中得到的錯誤。

來源

2015-11-26 11:05:10

因此，請嘗試用TWBootstrapViewStrategy.AppendToInput替換ValidateCustomAttrbiuteStrategy.TWBootstrapAppendToInput？ – jbailie1991

是的，這應該有所幫助。此外，您可以嘗試從'aurelia-validation'插件初始化中移除配置以使用默認行爲。 –

啊所以.plugin（（config）... etc是嗎？ – jbailie1991

奧裏利亞驗證 - 不進行驗證失敗

回答

相關問題