如果你希望在文本框未输入内容时，星号变为红色并且文本框的边框也变为红色，可以使用 CSS 和 JavaScript 进行样式处理和验证。以下是一个示例，展示了如何实现这些功能：
HTML 代码
<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; padding-top: 7px;">
系诺还款金额<span class="required-star">*</span>
</label>
<div class="orientation col-sm-8" style="padding-left: 0; padding-right: 0;">
<input type="text" id="committedRepaymentAmount" class="form-control"
value="${dataInfo.committedRepaymentAmount || ''}" required />
</div>
</div>
</div>
<br/>
CSS 样式
.required-star {
color: gray; /* 默认颜色为灰色 */
}
input.invalid {
border-color: red; /* 文本框边框变成红色 */
}
input.valid {
border-color: initial; /* 重置边框颜色 */
}
JavaScript 校验
document.querySelector('form').addEventListener('submit', function(event) {
var input = document.getElementById('committedRepaymentAmount');
if (!input.value) {
// 如果没有输入值，显示错误效果
input.classList.add('invalid'); // 添加无效类
input.classList.remove('valid'); // 移除有效类
document.querySelector('.required-star').style.color = 'red'; // 星号变红
alert('请填写系诺还款金额');
event.preventDefault(); // 阻止表单提交
} else {
// 如果有输入值，清理错误效果
input.classList.remove('invalid'); // 移除无效类
input.classList.add('valid'); // 添加有效类
document.querySelector('.required-star').style.color = 'gray'; // 恢复星号颜色
}
});
实现说明：
CSS：
.required-star用于定义星号的默认颜色为灰色。input.invalid定义了文本框未填时的样式（边框颜色为红色）。input.valid可用于重置输入框的样式。
JavaScript：
- 当用户提交表单时，如果输入为空，则给输入框添加
invalid类，并移除valid类，同时将星号设置为红色，并弹出警告提示。 - 如果输入不为空，则会移除
invalid类，并添加valid类，恢复星号的颜色。
- 当用户提交表单时，如果输入为空，则给输入框添加
通过这种方式，你可以实现所需的功能：在未输入内容时星号变红、文本框变红，以及适当的反馈机制。
内容由零声教学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..." />
