在React中使用jQuery实现输入框校验失败时边框永久显色如何实现

API 探路者

2026-10-5

问题原因

你当前的CSS规则input[type=text].redBorder:focus只在输入框处于聚焦状态时才会生效，非聚焦状态下不会匹配到该样式规则，所以只有聚焦时才会显示红色边框。

修复方案

1. 调整CSS规则

移除:focus伪类限制，同时补充校验通过的绿色边框样式，还可以根据需要取消输入框默认的聚焦outline高亮，避免和自定义边框冲突：

/* 校验失败永久显示红色边框，聚焦时也保持 */
input[type=text].redBorder {
    border: 3px solid red;
}
/* 校验成功永久显示绿色边框，聚焦时也保持 */
input[type=text].greenBorder {
    border: 3px solid green;
}
/* 可选：取消输入框默认的聚焦高亮外框 */
input[type=text].inputInfo:focus {
    outline: none;
}

2. 修正JSX代码中的逻辑错误

你当前的className判断逻辑、input属性都有问题，需要调整：

原判断this.state.value1 != this.state.value1.match(/xxx/)逻辑错误：match方法返回的是匹配结果数组或null，不能直接和输入值做不等判断，应该直接判断匹配结果是否为null
input的受控属性写错了，React受控输入框要用value属性，不是value1

修正后的输入框代码：

<input 
  className={!this.state.value1.match(/^[a-zA-ZĞÜŞİÖÇğüşiöç]+$/) ? "redBorder inputInfo" : "greenBorder inputInfo"} 
  name="value1"  
  type="text"  
  placeholder="Name" 
  value={this.state.value1} 
  onChange={this.handleChange} 
/>