모든 입력 상자에 대해 동일한 코드를 반복하여 오류를 표시합니다.

Question

내 페이지에는 여러 개의 입력 상자가 있습니다. 여기 그 중 두 가지가 있습니다. 사용자가 입력 상자에 숫자만 입력하도록 제한하고 싶습니다.

으아악

사용자가 숫자만 입력할 수 있도록 제한하는 코드입니다.

으아악

모든 입력 상자에 대해 위 코드를 반복하고 싶지 않습니다. 클래스 이름을 기반으로 모든 텍스트 상자에 동일한 코드를 적용하고 입력 상자에 모든 숫자를 입력하면 별도의 오류 팝업이 표시되도록 더 빠른 방법이 있습니까? 클래스 이름은 모두 동일합니다.

Answer 1

예, 클래스 선택기를 사용하고 해당 클래스의 각 요소를 반복하여 중복을 방지하도록 코드를 리팩터링할 수 있습니다. 이를 달성하기 위해 코드를 수정하는 방법의 예는 다음과 같습니다.

으아악 으아악

이 예에서는 클래스 선택기$('.work')를 사용하여 수업 작업이 포함된 모든 요소를 ​​가져온 다음 Each 함수를 사용하여 각 요소를 반복합니다. 또한 유효한 변수를 사용하여 유효성 검사 상태를 추적합니다. 입력 상자에 유효하지 않은 데이터가 포함되어 있으면 유효함을 false로 설정하고 루프를 중단합니다. 마지막으로 유효한 변수가 false인 경우 양식 제출을 방지합니다.