typeScript input 框校验必填校验blur时有告警信息

如何实现“typeScript input 框校验必填校验blur时有告警信息”

1. 事情流程

首先，我们需要告诉小白整件事情的流程。我们可以用表格展示步骤：

步骤	内容
步骤一	在输入框上添加必填校验
步骤二	在输入框失去焦点时检查输入内容是否合法
步骤三	如果输入内容不合法，显示告警信息

2. 每一步需要做什么

接下来，我们需要告诉小白每一步需要做什么，并写下需要使用的每一条代码，并注释这些代码的意思。

步骤一：在输入框上添加必填校验

// 在输入框上添加必填校验
const inputElement = document.getElementById('input') as HTMLInputElement;
inputElement.setAttribute('required', 'true');

步骤二：在输入框失去焦点时检查输入内容是否合法

// 在输入框失去焦点时触发校验
inputElement.addEventListener('blur', () => {
    if (!inputElement.value) {
        // 如果输入内容为空，则显示错误信息
        inputElement.setCustomValidity('请输入内容');
    } else {
        inputElement.setCustomValidity('');
    }
});

步骤三：如果输入内容不合法，显示告警信息

// 监听表单提交事件
formElement.addEventListener('submit', (event) => {
    if (!inputElement.checkValidity()) {
        // 如果输入内容不合法，则阻止表单提交，并显示错误信息
        event.preventDefault();
        inputElement.reportValidity();
    }
});

3. 甘特图

gantt
    title 实现“typeScript input 框校验必填校验blur时有告警信息”
    section 整体流程
    步骤一: 2022-01-01, 1d
    步骤二: 2022-01-02, 1d
    步骤三: 2022-01-03, 1d

4. 旅行图

journey
    title 实现“typeScript input 框校验必填校验blur时有告警信息”
    section 开始
    步骤一: 进行中
    步骤二: 未开始
    步骤三: 未开始

现在，小白应该清楚了如何实现在 TypeScript 中对输入框进行必填校验，并在失去焦点时显示告警信息。希望这篇文章对他有帮助！