您需要更改一些东西，包括HTML和CSS。
首先，将类.form-control-custom添加到#GWTci输入元素：

<input required class="form-control form-control-custom" type="text" name="" id="GWTci" class="form-inline">

接下来，在CSS中，更改以下两个规则集：

.form-control-custom.is-valid,
.was-validated .form-control-custom:valid {
    border-color: var(--bs-success);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.form-control-custom.is-invalid,
.was-validated .form-control-custom:invalid {
    border-color: var(--bs-danger);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

到这个

.was-validated .form-control-custom.valid {
    border-color: var(--bs-success) !important;
    padding-right: calc(1.5em + 0.75rem) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(0.375em + 0.1875rem) center !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
}
.was-validated .form-control-custom.invalid {
    border-color: var(--bs-danger) !important;
    padding-right: calc(1.5em + 0.75rem) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(0.375em + 0.1875rem) center !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
}

请注意：

• .form-control-custom.is-valid已从两组规则中删除
• 我们使用类（分别为.valid和.invalid），而不是通过:valid/:invalid伪选择器将.form-control-custom类作为目标，因为它们是由您的Javascript添加的
• !important是作为一种强制执行规则的方式引入的，但这并不是最好的解决方案--你可以通过增加特殊性来达到你所需要的（例如，为你的输入增加额外的类或属性），而且如果你在某个时候需要覆盖你所说的重要内容，你可以为自己省去一些麻烦。

您的IP匹配RegEx似乎工作正常，并与HTML和CSS中的更改配对将：

• 如果一切正常，在表单提交上添加一个绿色的勾号
• 如果输入无效（regex检查失败，或所需输入为空），请删除绿色勾号并添加感叹号