Question

我一直在研究Aurelia-Validation示例，我有以下内容：

的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>

welcome.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/aurelia-validation@0.6.0中。它似乎仍无法正常工作

Answer 1

我通过aurelia验证来源挖了一下，发现ValidateCustomAttributeViewStrategy.TWBootstrapAppendToInput中唯一提到的是Intro documentation。此类及其静态成员似乎已重命名。您可以使用的新静态成员是TWBootstrapViewStrategy.AppendToInput。它可以在TWBootstrapViewStrategyBase source code中找到。

有一个pull request，它应该合并到主分支，但是Intro.md仍然包含旧的配置。

P.S。您不需要添加p元素。这将自动处理。

P.P.S。您还need to have .catch在调用validation.validate()时处理所有失败的验证。这样可以防止你在控制台中遇到的错误。

Aurelia验证 - 验证失败时未显示任何消息

1 个答案: