-DPDK中文网

要实现文本框进行必填校验，并在未输入内容时将其变红，你可以结合 HTML、CSS 和 JavaScript 来完成。以下是一个完整的示例，展示如何实现这个功能：

HTML 代码

<form id="myForm">
    <div class="row" style="margin-top: 7px;">
        <div class="col-md-4" style="overflow-wrap: break-word;">
            <label for="committedRepaymentAmount" class="control-label col-sm-4" 
                   style="display: inline-block; white-space: nowrap; text-align: left; overflow-wrap: normal; padding-top: 7px;">
                系诺还款金额<span class="required-star">*</span>
            </label>
            <div class="orientation col-sm-8" style="padding-left: 0px; padding-right: 0px;">
                <input type="text" id="committedRepaymentAmount" class="form-control"
                       value="${dataInfo.committedRepaymentAmount || ''}" required />
            </div>
        </div>
    </div>
    <br/>
    <button type="submit">提交</button>
</form>

CSS 样式

.required-star {
    color: gray; /* 默认星号颜色为灰色 */
}

.invalid {
    border-color: red; /* 文本框无输入时边框变为红色 */
}

JavaScript 校验

document.getElementById('myForm').addEventListener('submit', function(event) {
    var input = document.getElementById('committedRepaymentAmount');
    
    if (!input.value.trim()) { // 检查是否为空
        input.classList.add('invalid'); // 添加无效类
        event.preventDefault(); // 阻止表单提交
        alert('请填写系诺还款金额'); // 提示信息
    } else {
        input.classList.remove('invalid'); // 移除无效类
    }
});

实现说明：

HTML：在表单中添加了一个文本框和一个提交按钮。
CSS：
- .required-star 用于设置星号的颜色。
- .invalid 类用于定义文本框的边框颜色为红色。
JavaScript：
- 在表单提交事件中检查 committedRepaymentAmount 输入框的值。如果为空，则添加 invalid 类并弹出提示，同时阻止表单提交；如果有值，则移除 invalid 类。