使用 javascript 验证人体身高

Question

我需要一个文本框来输入人体身高。我需要使用 jquery 来做到这一点。是否有我可以用来执行验证的插件或代码示例。有人可以帮我使用 jquery 验证文本框吗？

Answer 1

您将需要使用正则表达式：

var height = '4\'3"'; //$('selector-to-input').val()
if (/^[0-9]+\' ?[0-9]+\"$/.match(height)) {
    //do something
}

这不是最好的正则表达式，但它会检查 9'5" 或 5'7" 或 5'11" 等任何内容。

有关更多正则表达式的内容，请查看：Regex Info

编辑：更好的正则表达式可能是这样的

/^[0-9]+ ?(\'|ft|cm|meters|feet|in|inches|\")?( *[1-9]+ ?(\"|inches|in|cm)?)?$/

您必须在午休时间对其进行测试，然后需要回去工作。

Answer 2

创建两个文本框：一个代表英尺，一个代表英寸。 然后将它们放入相同的单元中。

喜欢：

var person_height = $(feet).val()*12 + $(inches).val();

这样他们只输入数字——不输入字符。

或者，如果您在欧洲或任何地方，只需一个米文本框。 （1.5米）

哦，公制。 很快。

Answer 3

这是我用于人体身高验证的代码

function height_validate(val) {
   const value = $("#height_val").val().trim();
   if (!value.length) {
      $(".error-navigation-message").text("This field is required.").show();
      if (val == 2) {
         return false;
      }
   } else {
      const height_regex = /^\d{1}'\d{1,2}(''|")$/;
      if (!height_regex.test(value)) {
         $(".error-navigation-message").text("Please enter in 0'0'' format").show();
         if (val == 2) {
            return false;
         }
      } else {
         const parts = value.match(/^(\d{1})'(\d{1,2})(''|")$/);
         const inches = parseInt(parts[2], 10);

         if (inches >= 0 && inches <= 11) {
            $(".error-navigation-message").hide();
         } else {
            $(".error-navigation-message").text("Inches must be between 0 and 11.").show();
            if (val == 2) {
               return false;
            }
         }
      }
   }
}

// Blur validation
$("#height_val").on('blur', function () {
   height_validate(1);
});

// submit buttion validation
$("#submit_button").on('click', function (e) {
   if (height_validate(2) !== false) {

      // Perform your action
    alert("Validation passed");
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- begin snippet: js hide: false console: true babel: false babelPresetReact: false babelPresetTS: false -->

function height_validate(val) {
   const value = $("#height_val").val().trim();
   if (!value.length) {
      $(".error-navigation-message").text("This field is required.").show();
      if (val == 2) {
         return false;
      }
   } else {
      const height_regex = /^\d{1}'\d{1,2}(''|")$/;
      if (!height_regex.test(value)) {
         $(".error-navigation-message").text("Please enter in 0'0'' format").show();
         if (val == 2) {
            return false;
         }
      } else {
         const parts = value.match(/^(\d{1})'(\d{1,2})(''|")$/);
         const inches = parseInt(parts[2], 10);

         if (inches >= 0 && inches <= 11) {
            $(".error-navigation-message").hide();
         } else {
            $(".error-navigation-message").text("Inches must be between 0 and 11.").show();
            if (val == 2) {
               return false;
            }
         }
      }
   }
}

// Blur validation
$("#height_val").on('blur', function () {
   height_validate(1);
});

// submit button validation
$("#submit_button").on('click', function (e) {
   if (height_validate(2) !== false) {

      // Perform your action
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>