注册ID韩语字符验证失效问题修复咨询

问题根源 #

你的代码存在两个关键问题导致韩语验证不生效：

• 正则逻辑错误：当前正则/^[ㄱ-ㅎ|가-힣]+$/是匹配完全由韩语字符组成的输入，但需求是只要包含韩语字符就判定无效，匹配范围不符合需求。
• 语法调用错误：regex.test.userNameInput是错误写法，正确的正则检测调用应该是regex.test(userNameInput)，之前的写法相当于访问属性，根本没执行正则检测。

修复步骤 #

1. 修正正则表达式：将全匹配正则改为检测是否存在韩语字符的正则，去掉^和$限定符：

   const regex = /[ㄱ-ㅎ|가-힣]/;
   

2. 修正正则调用方式：把错误的属性访问改为函数调用：

   regex.test(userNameInput)
   

3. 优化逻辑判断：合并两个无效条件，让代码更贴合需求逻辑。

修改后的完整代码 #

import React, { useState } from 'react'
import styled from 'styled-components';
import redX from '../../resources/images/img/redX.png'

const InputWrap = styled.div`
  align-items: center;
  -webkit-appearance: none;
  background: rgb(250, 250, 250);
  border: 1px solid rgb(219, 219, 219);
  border-radius: 3px;
  box-sizing: border-box;
  color: rgb(38, 38, 38);
  display: flex;
  flex-direction: row;
  font-size: 14px;
  position: relative;
  width: 100%;

  .userIdCheck {
    //conditional rendering
    display: ${props=>props.isUserName===true?'none':'flex'};
    align-items: center;
    border: 0;
    box-sizing: border-box;
    flex: 0 0 auto;
    flex-direction: row;
    font: inherit;
    font-size: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    padding-right: 8px;
    position: relative;
    vertical-align: middle;
  }

  .userIdCheckWrap {
    border: 0;
    font: inherit;
    font-size: 100%;
    margin: 0;
    margin-left: 8px;
    padding: 0;
    vertical-align: baseline;
    background-repeat: no-repeat;
    background-position: -249px -333px;
    height: 22px;
    width: 22px;
  }
`

function SignUpUserInput({userName,setUserName}) {

  const [isUserName, setIsUserName] = useState(false);
  const onChangeName = (e) => {
    // 修正后的正则：检测输入是否包含韩语字符
    const regex = /[ㄱ-ㅎ|가-힣]/;
    const userNameInput = e.target.value

    // 合并条件：长度小于6 或 包含韩语字符 → 标记为无效
    if(userNameInput.length < 6 || regex.test(userNameInput)) {
      setIsUserName(false)
    } else {
      setIsUserName(true)
    }
  }

  return (
    <InputWrap isUserName={isUserName}>
      <label className='inputLabel'>
        <span className='inputHover'>
          사용자 이름
        </span>
        <input className='inputInput' value={userName} onChange={(e)=>{setUserName(e.target.value); onChangeName(e);}}/>
      </label>
      <div className='userIdCheck'>
        <span className='userIdCheckWrap'>
          <img src={redX} alt='redX' />
        </span>
      </div>
    </InputWrap>
  )
}

export default SignUpUserInput;

额外说明 #

修正后的正则/[ㄱ-ㅎ|가-힣]/会匹配任何包含韩语辅音（ㄱ-ㅎ）或韩语汉字（가-힣）的输入，完全符合需求中"包含韩语字符就判定无效"的规则；合并后的条件判断更直观，直接对应两个无效场景，避免逻辑分支混乱。

内容的提问来源于stack exchange，提问作者MontaKr