유효성 검사(?)로 클라이언트를 막아보자 - 1

인풋은 텍스트인데 숫자만 받고싶을 때 (복붙도 막아준다)

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');" />

 

인풋은 숫자인데 클라이언트가 직접 입력하길 바라지 않을 때

<input type="number" onkeydown="return false">

disabled 처럼 보이는 readonly 를 만들고 싶을 때

<input type="text" style="color: #787878;" readonly/>

---

영어만 사용가능하게 제한하고 싶을 때 (제출할 때 검사됨)

<input type="text" pattern="[a-zA-Z]+">

영어와 숫자까지만 가능하게 제한하고 싶을 때 (제출할 때 검사됨)

<input type="text" pattern="[a-zA-Z0-9]+">

영문만 사용가능하게 제한하고 싶을 때 (입력할 때 검사됨)

<input type="text" onKeyPress="engOnly();">    
    
    function engOnly() {
        var objEvent = event.srcElement;
        var numPattern = /^[A-Za-z]*$/;
        numPattern = objEvent.value.match(numPattern);
        if (numPattern == null) {
            Swal.fire({
                text: "영문만 입력 가능합니다.",
                icon: 'warning',
                confirmButtonColor: '#3085d6',
                confirmButtonText: '확인'
            }).then((result) => {
                if (result.isConfirmed) {
                    objEvent.value = objEvent.value.substr(0, objEvent.value.length - 1);
                    objEvent.focus();
                    return false;
                }
            });
        }
    }

 

한글만 사용가능하게 제한하고 싶을 때 (입력할 때 검사됨)

<input type="text" onKeyPress="hangul();">

    function hangul() {
        if ((event.keyCode < 12592) || (event.keyCode > 12687)) {
            Swal.fire({
                text: "한글만 입력 가능합니다.",
                icon: 'warning',
                confirmButtonColor: '#3085d6',
                confirmButtonText: '확인'
            }).then((result) => {
                if (result.isConfirmed) {
                    event.returnValue = false;
                }
            });
        }
    }

 

클라이언트 막는 것은 앞으로도 계속크