要实现文本框进行必填校验，并在未输入内容时将其变红，你可以结合 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类。
- 在表单提交事件中检查
通过这种方式，当用户未在文本框中输入内容时，文本框会变红并显示警告，用户必须输入有效内容才能提交表单。
内容由零声教学AI助手提供，问题来源于学员提问
class notfree_port_info
{
public:
notfree_port_info()
{
port = 0;
last_data_timestamp = 0;
}
~notfree_port_info() = default;
notfree_port_info(const notfree_p..." />
