Material-UI TextField 속성 error와 JavaScript test()를 이용한 validation (유효성검사)

JavaScript가 제공하는 test메서드와 TextField가 제공하는 error와 helperText를 이용하여 간단히 validation 구현

JavaScript 정규식표현을 이용한 test메서드 활용하기

let checkSpc = /[~!@#$%^&*()-=_+{}|,./<>?;':"]/;
let checkKor = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
let checkEng = /[a-z | A-Z]/; //대문자 소문자 구분

checkSpc.test('a') // false
checkSpc.test('ㄱ') // false
checkSpc.test('!') // true

checkKor.test('a') // false
checkKor.test('ㄱ') // true
checkKor.test('!') // false

checkEng.test('a') // true
checkEng.test('ㄱ') // false
checkEng.test('!') // false

정규식 표현을 변수에 할당하고 test메서드에 유효성 검사를 할 텍스트를 입력하면 true와 false로 반환합니다.

해당 기능을 이용하여 유효성 검사후 별도의 css 작업이 필요 없는 코드 작성 시작!!

 

TextField 속성 error

error는 boolean type으로 다른 색상을 통해 error를 나타내는 속성입니다.

alert을 이용하여 알림창을 나타낼 수 있지만 그것보다는 input창 밑에 알림 나타나는것을 선호하여 error기능을 이용하였습니다.

 

Validation(유효성검사)

import React, { useState } from 'react';
import TextField from '@material-ui/core/TextField'

const App = () => {
    const [value, setValue] = useState('');

    const onChange = (e)=> {
        setValue(e.target.value)
    }

    const validation =()=>{
        let check = /[~!@#$%^&*()_+|<>?:{}.,/;='"ㄱ-ㅎ | ㅏ-ㅣ |가-힣]/;
        return check.test(value);
    }

    return (
        <div>
            <TextField 
                label="유효성검사" 
                type="text" 
                name="validation" 
                variant="outlined"
                value={value}
                onChange={onChange}
                error={validation()}
                helperText={validation() ? "특수기호나 한글은 입력 하실 수 없습니다.":""}
            />
            <p>{value}</p>
        </div>
    );
};

export default App;

validation 함수를 선언해서 test메서드를 이용해서 boolean type으로 결과값을 반환 받은 것을 TextField의 error에 입력만 해주면 끝!!

라벨 말고 도움 문구는 helperText 속성을 이용하면 되는데 삼항연산자를 통해 true일때와 false일때 문구를 지정해서 넣어주면 됩니다.