我已经设置了这样的验证:
_setValidation() {
this._validator = new Validator(this.model)
.ensure("city")
.required()
.length({ minimum: 5, maximum: 200 })
.ensure("emailAddress")
.required()
.email();
// for some reason reporter cannot be named _reporter...
this.reporter = ValidationEngine.getValidationReporter(this.model);
this._subscriber = this.reporter.subscribe(result => this._renderErrors(result));
}
_renderErrors(result) {
this.validationErrors.splice(0, this.validationErrors.length);
result.forEach(error => {
this.validationErrors.push(error);
});
}
视图如下:
<form class="bordered" submit.delegate="searchRestaurants()">
<div class="form-group row">
<div class="col-xs-2 text-right">
<label for="email" class="form-control-label">Email address</label>
</div>
<div class="col-xs-5">
<input type="text" class="form-control" id="email" placeholder="Enter email" value.bind="model.emailAddress & validate" />
</div>
<div class="col-xs-5">
<small class="text-muted">We'll never share your email with anyone else.</small>
<br />
<small class="text-muted">Entered email will be used later on to confirm reservation.</small>
</div>
</div>
<div class="form-group row">
<div class="col-xs-2 text-right">
<label for="city" class="form-control-label">City</label>
</div>
<div class="col-xs-5">
<input type="text" class="form-control" id="city" placeholder="City in which you are looking for a restaurant" value.bind="model.city & validate" />
</div>
<div class="col-xs-3">
<input type="submit" class="btn btn-info" value="Search for restaurants!" />
</div>
</div>
</form>
问题是在我按下提交按钮之前,验证不会运行。如果我在我的模型上使用了装饰器语法,那就不是这样了:
export class RestaurantSearchModel {
@required @length({ minimum: 5, maximum: 200 }) city;
@required @email emailAddress;
}
然而在这种情况下还有另一个问题 - @required
验证器没有被运行(永远!)。
我能做些什么来使这两种方法中的任何一种都有效?
PS。我使用的是aurelia-validatejs插件的0.3.0版本。
修改
我将插件更新到最新版本(0.4.0),但它仍然有一些错误......似乎它不稳定的AF! :)所以现在这个问题的目的发生了变化 - 您是否知道任何其他aurelia验证插件?