여러 가지 방식들이 있던데 내가 원하는 범위는 크지 않았기 때문에 아쉬운 부분이 있어 아래와 같이 처리했다.
입력시에는 -와 숫자가 아니면 막고 저장 시에 "-", "." 반복이나 위치, 0으로 시작 등을 확인한다.
decimal 확인하는건 DB이 범위보다 큰 경우가 있어서 넣었다.
정규식을 저렇게 사용하는 방식은 정규식 리터널 방식.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="test" oninput="inputValidCheck()"></input>
<button type="button" onclick="buttonValidCheck()">check</button>
</body>
<script>
function inputValidCheck() {
let test = document.querySelector("#test");
test.value = test.value.replace(/[^0-9.\-]+/g,'');
}
function buttonValidCheck() {
let test = document.querySelector("#test");
if (!isValidNumber(test.value)) {
alert("확인");
return;
}
if (!isValidDeimalPoint(test.value)) {
alert("decimal 범위 확인");
return;
}
alert("성공");
}
function isValidNumber(value) {
// -, 0 반복이나 여러개 체크
const validNumberRegex = /^-?(0|[1-9]\d*)(\.\d+)?$/;
return validNumberRegex.test(value);
}
function isValidDeimalPoint(value) {
// 숫자, 정수 범위 체크
// decimal (10, 5)
const validNumberRegex = /^-?(0|[1-9]\d{0,4})(\.\d{0,5})?$/;
return validNumberRegex.test(value);
}
</script>
</html>
'Lang > Javascript' 카테고리의 다른 글
| datatables 동적 (0) | 2024.06.01 |
|---|---|
| Datatables dom으로 버튼 넣으면 줄바꿈 생길 시 (0) | 2023.11.30 |
| goolgle maps + markerwithlabel 사용 시 infoWindow가 동작하지 않을 때 (0) | 2023.11.19 |