jQuery 유효성 검사: 입력을 숫자와 소수점으로 제한합니다.-JS 튜토리얼-php.cn

jQuery 유효성 검사: 입력을 숫자와 소수점으로 제한합니다.

王林

풀어 주다： 2024-02-24 11:33:30

원래의

1130명이 탐색했습니다.

jQuery 유효성 검사: 입력을 숫자와 소수점으로 제한합니다.

jQuery 유효성 검사: 숫자와 소수점만 입력할 수 있습니다.

웹 개발에서는 사용자가 입력한 내용을 확인해야 하는 경우가 많으며, 특히 숫자 입력의 경우 일반적으로 제한이 필요합니다. 사용자는 숫자와 소수점만 입력할 수 있습니다. 이 기사에서는 jQuery를 사용하여 이 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

요구사항 분석

개발 과정에서 금액 입력란, 수량 입력란 등 사용자가 숫자와 소수점만 입력해야 하는 경우가 있습니다. 데이터의 정확성과 형식의 표준화를 보장하려면 사용자 입력을 제한해야 합니다.

솔루션

정규식과 결합된 jQuery를 사용하여 사용자 입력을 제한할 수 있습니다. 먼저, 사용자가 입력한 문자가 입력 상자의 키 누르기 이벤트에서 요구 사항을 충족하는지 확인해야 합니다. 요구 사항을 충족하지 않으면 기본 이벤트를 차단합니다. 그런 다음 입력 상자의 흐림 이벤트에서 사용자가 입력한 내용을 추가로 처리하여 입력 내용이 요구 사항을 충족하는지 확인할 수 있습니다.

특정 코드 예시

다음은 입력창에 숫자와 소수점만 입력할 수 있다는 제한을 구현한 간단한 예시 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 유효성 검사: 입력을 숫자와 소수점으로 제한합니다.</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <input type="text" id="numberInput" placeholder="只能输入数字和小数点">
  
  <script>
    $(document).ready(function(){
      $('#numberInput').keypress(function(event){
        var charCode = (event.which) ? event.which : event.keyCode;
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
          event.preventDefault();
        } else {
          return true;
        }
      });
      
      $('#numberInput').blur(function(){
        var inputValue = $(this).val();
        var newValue = inputValue.replace(/[^0-9.]/g, '');
        $(this).val(newValue);
      });
    });
  </script>
</body>
</html>

로그인 후 복사

이 코드에서는 먼저 jQuery 라이브러리를 도입하고 입력 상자, ID는 numberInput입니다. 준비 이벤트에서는 입력 상자의 키 누르기 이벤트를 모니터링하여 입력 콘텐츠가 요구 사항을 충족하는지 확인하고, 흐림 이벤트에서는 입력 콘텐츠를 추가로 처리하여 조건을 충족하지 않는 문자를 제거합니다.

요약

위의 코드 예제를 통해 사용자 입력 콘텐츠에 대한 제한을 구현하고 입력 콘텐츠가 요구 사항을 충족하는지 확인할 수 있습니다. 실제 개발에서는 다양한 시나리오의 요구 사항을 충족하기 위해 특정 요구 사항에 따라 코드를 적절하게 수정하고 조정할 수 있습니다. 이 글이 도움이 되셨으면 좋겠습니다. 읽어주셔서 감사합니다!

위 내용은 jQuery 유효성 검사: 입력을 숫자와 소수점으로 제한합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!