Question

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
            <label class="control-label">SKU</label>
            <input disabled.bind="readonly" type="text" class="form-control" value.bind="production.Sku1">
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label class="control-label">SKU</label>
            <input disabled.bind="readonly" type="text" class="form-control" value.bind="production.Sku2">
        </div>
    </div>
</div>

我有上面的文本框，sku1必须是必填项或sku2。我知道如何在看起来像Aurelia之类的东西中做到这一点。

我希望它会像

那样简单

this.validator = this.validation.on(this)
    .ensure('production.StockStatusId').isGreaterThan(0).withMessage('is required')
    .ensure('production.Sku1').isNotEmpty().Or.ensure('production.Sku2').isNotEmpty();

我已经触及if语句但不确定computedFrom是什么

更新

我希望这会奏效，但不是。谁知道为什么？

.ensure('production.Sku1', (config) => {config.computedFrom(['HasProvidedEitherSku'])})
.passes(() => { return this.HasProvidedEitherSku }).withMessage("(Need to provide a SKU)")

get HasProvidedEitherSku(){
    if ((this.production.Sku1 === undefined || this.production.Sku1 === null) && (this.production.Sku2 === undefined || this.production.Sku2 === null)){
        return false;
    } else {
        return true;
    }
}

更新

这在某种程度上确实有效。但是两者都会立即显示错误，但错误仅在已生效的错误上清除。我理解为什么因为错误消息附加到每个sep，但是我不知道如何阻止这个

                .ensure('production.Sku1', (config) => {config.computedFrom(['HasProvidedEitherSku'])})
                .if(() => { return this.HasProvidedEitherSku })
                    .isNotEmpty().withMessage('a SKU is required')
                .endIf()
                .ensure('production.Sku2', (config) => {config.computedFrom(['HasProvidedEitherSku'])})
                .if(() => { return this.HasProvidedEitherSku })
                    .isNotEmpty().withMessage(‘a SKU is required')
                .endIf();

Answer 1

以下是我使用的内容：

<强> HTML

    <div class="col-sm-6">
        <div class="form-group">
            <label class="control-label">SKU</label>
            <input disabled.bind="readonly" type="text" class="form-control" value.bind="Sku1">
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label class="control-label"> SKU</label>
            <input disabled.bind="readonly" type="text" class="form-control" value.bind="Sku2">
        </div>
    </div>

<强>验证

                    .ensure('Sku1', (config) => {config.computedFrom(['Sku1, Sku2'])})
                    .if(() => { return this.HasProvidedEitherSku1OrSku2 === false })
                        .isNotEmpty().withMessage(‘at least one sku is required')
                        .hasLengthBetween(0, 50)
                    .endIf()                    
                    .ensure('Sku2', (config) => {config.computedFrom(['Sku1, Sku2'])})
                    .if(() => { return this.HasProvidedEitherSku1OrSku2 === false })
                        .isNotEmpty().withMessage(‘at least one sku is required’)
                        .hasLengthBetween(0, 50)
                    .endIf();

验证方法

get HasProvidedEitherSku1OrSku2 (){
    if ((this.Sku1 === undefined || this.Sku1 === null || this.Sku1 === '') && (this.Sku2=== undefined || this.Sku2=== null || this.Sku2=== '')){
        return false;
    } else {   
        return true;
    }
}

Aurelia验证 - 两个字段之一必须是强制性的

1 个答案: