javascript - การตรวจสอบฟิลด์เมื่อเลิกโฟกัสด้วย Aurelia

ฉันกำลังใช้ Aurelia และ Typescript ในการสร้างหน้าเว็บ ฉันมีฟอร์มเข้าสู่ระบบง่ายๆ และฉันต้องการตรวจสอบอีเมลและรหัสผ่านของผู้ใช้

ฉันกำลังใช้การตรวจสอบของ Aurelia และโดยค่าเริ่มต้นมันจะตรวจสอบเนื้อหาของข้อมูลนำเข้าของฉันทุกครั้งที่มีการเปลี่ยนแปลง ซึ่งสามารถทำให้รู้สึกรำคาญได้ (เช่น การได้รับข้อความแสดงข้อผิดพลาดว่าที่อยู่อีเมลไม่ถูกต้องทั้งๆ ที่ยังพิมพ์ไม่เสร็จ) ดังนั้นฉันอยากจะทำการตรวจสอบเมื่อเกิด onBlur แทน (เมื่อโฟกัสออกจากช่องป้อนข้อมูล) และเมื่อผู้ใช้คลิกปุ่มเข้าสู่ระบบ

นี่คือโค้ดของฉัน:

login.html

<template>
<section>
    <div class="container col-lg-12">
        <div class="col-md-4 col-md-offset-4 centered">
            <h2 t="signin_sign_in"></h2>
            <form role="form" submit.delegate="login()" validate.bind="validation">
                <br if.bind="errors" />
                <div if.bind="errors" repeat.for="error of errors" class="alert alert-danger">
                    <h4 repeat.for="message of error">${message}</h4>
                </div>
                <div class="form-group">
                    <label class="control-label" t="signin_email_address"></label>
                    <input type="text" class="form-control" value.bind="email">
                </div>
                <div class="form-group">
                    <label class="control-label" t="signin_password"></label>
                    <input type="password" class="form-control" value.bind="password">
                </div>
                <button type="submit" class="btn btn-primary" t="signin_sign_in"></button>
            </form>
        </div>
    </div>
</section>
</template>

login.ts

@autoinject()
export class Login {
  email: string;
  password: string;
  router: Router;
  application: ApplicationState;
  accountService: AccountService;
  errors;
  validation;
  i18n: I18N;

constructor(router: Router, application: ApplicationState, accountService: AccountService, validation: Validation, i18n: I18N) {
    this.router = router;
    this.application = application;
    this.accountService = accountService;
    this.i18n = i18n;
    this.errors = [];

    this.validation = validation.on(this)
        .ensure('email')
            .isNotEmpty()
            .isEmail()
        .ensure('password')
            .isNotEmpty()
            .hasLengthBetween(8, 100);
}

navigateToHome(): void {
    this.router.navigate("/welcome");
}

login(): void {
    var __this = this;
    this.validation.validate()
        .then(() => this.accountService.signin(this.email, this.password, this.rememberMe)
            .then(result => {
                // Do stuff
            })
            .catch(error => {
                // Handle error
                }
            }));
}
}

ความคิดแรกของฉันคือการเพิ่ม

& updateTrigger:'blur':'paste'

กับการผูกของฉันใน HTML แต่ไม่ทำงาน การผูกนั้นได้รับการอัปเดตอย่างถูกต้องเมื่อสูญเสียโฟกัส แต่การตรวจสอบความถูกต้องหยุดทำงาน ไม่มีข้อผิดพลาดในคอนโซลดีบักของ Chrome ด้วยเช่นกัน

มีไอเดียเกี่ยวกับวิธีทำสิ่งนี้ไหม? เป็นไปได้เลยหรือ?

คำตอบ #1

ฉันเพิ่งเจอสถานการณ์การใช้งานเช่นนี้และฉันได้แก้ปัญหาด้วยการใช้ฟีเจอร์ debounce ที่มีอยู่ใน Aurelia

<input type="text" class="form-control" id="email" placeholder="อีเมล" value.bind="email & validateOnChangeOrBlur & debounce:600 ">

600ms เป็นค่าที่กำหนดขึ้นมาเอง แต่คุณสามารถปรับเปลี่ยนมันตามที่ต้องการได้เสมอ

คำตอบ #2

มีพฤติกรรมการผูกข้อมูลต่าง ๆ ที่คุณสามารถใช้เพื่อบอกว่าเมื่อใดควรเรียกใช้การตรวจสอบความถูกต้อง คุณสามารถอ่านเพิ่มเติมเกี่ยวกับพวกมันได้ในเอกสารของ Aurelia เกี่ยวกับการตรวจสอบความถูกต้อง

จากเอกสาร;

พฤติกรรมการผูกตรวจสอบจะปฏิบัติตาม validateTrigger ของตัวควบคุมที่เกี่ยวข้อง (blur, change, changeOrBlur, manual) หากคุณต้องการใช้ validateTrigger ที่แตกต่างกันในผูกเฉพาะ ให้ใช้พฤติกรรมการผูกต่อไปนี้แทน & validate:

& validateOnBlur: เหตุการณ์ blur ของ DOM จะทำให้เกิดการตรวจสอบความถูกต้อง
& validateOnChange: การป้อนข้อมูลที่เปลี่ยนโมเดลจะทำให้เกิดการตรวจสอบความถูกต้อง
& validateOnChangeOrBlur: การ blur ของ DOM หรือการป้อนข้อมูลจะทำให้เกิดการตรวจสอบความถูกต้อง
& validateManually: การผูกไม่ได้รับการตรวจสอบความถูกต้องโดยอัตโนมัติเมื่อองค์ประกอบที่เกี่ยวข้องถูก blur หรือเปลี่ยนแปลงโดยผู้ใช้