如何使用jquery-step在每个步骤中仅验证最多3位数字

朱尼德·汗

您好尝试使用jquery stepjs逐步制作身体测量表格https://github.com/rstaib/jquery-steps/我的代码在完成时提交了数据,但需要有关字段最大3位数字验证的帮助是按下下一个按钮之前的测量

<form id="form" name="form" method="post" action="mail/men-measure.php" class="measureinput-inner">

            <section class="tabs-continners">
    <input type="text" class="measureinput" placeholder="Enter Measurement In cm" id="bandhgala-length" name="bandhgala-length">
    </section>

            <section class="tabs-continners">
    <input type="text" class="measureinput" placeholder="Enter Measurement in cm" id="bundi-length" name="bundi-length">
    </section>

            <section class="tabs-continners">
        <input type="text" class="measureinput" placeholder="Enter Measurement In cm" id="fly" name="fly" >
    </section>
      </div>
 </div>

我的剧本

   <script src="js/jquery.steps.js"></script>

   <script>
   $(function ()
   {
      $("#wizard").steps({
        headerTag: "h2",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        stepsOrientation: "vertical",
              onFinished: function (event, currentIndex) {
       $("#form")[0].submit();
       }
    });

   });
   </script>
as.if.i.code

使用正则表达式验证数字位数。您将需要额外的onStepChangingonFinishing参数steps()

正则表达式/^[0-9]{1,3}$/最多只能输入3位数字,例如1、12、123,但不允许1234,依此类推。您可以编写自己的逻辑来警告用户输入最多3位数字。(例如,红色文本)
注意:此正则表达式不允许空白值。要允许空白值,将正则表达式修改为/^[0-9]{0,3}$/

编辑:
您有4个步骤,每个步骤都有一个输入,因此我们需要验证<input>在当前步骤上可见的。因此,我在类中添加了当前步骤的index(currentIndex在脚本中)作为后缀measureinput您可以在每个中注意到的measureinput0, measureinput1, measureinput2, measureinput3<input><section>

现在,我们只能验证<input>JavaScript中可见的电流

$(function() {
  $("#wizard").steps({
    headerTag: "h2",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    stepsOrientation: "vertical",
    enableKeyNavigation: true,

    onStepChanging: function(event, currentIndex, newIndex) { 
      
      // always clear error message on click of 'next' and 'previous'
      clearErrorMessage('measureinput' + currentIndex);      
      
      // in case of 'next', newIndex is greater than currentIndex
      // so below condition will validate only in case of 'next', not 'previous'
      if (currentIndex < newIndex) {     
        return ValidateField('measureinput' + currentIndex);
      }
      else {
        return true;
      }
    },

    onFinishing: function(event, currentIndex) {      
      return ValidateField('measureinput' + currentIndex);
    },
    onFinished: function(event, currentIndex) {      
        $("#form")[0].submit();      
    }
  });

  function ValidateField(classNameOfField) {
    var allFields = $("." + classNameOfField);
    for (i = 0; i < allFields.length; i++) {        	
      if (/^[0-9]{1,3}$/.test(allFields[i].value)) {        
        return true;
      } else {
        //alert('Max 3 digits are allowed!'); // you can write your own logic to warn users 
        showErrorMessage(classNameOfField);
        return false;
      }
    }
  }
  
  function showErrorMessage(classNameOfField)
  {
    $("."+classNameOfField).css("border-color", "red");
    $("#errorMessage").css("display", "block");
  }
  
  function clearErrorMessage(classNameOfField)
  {
     $("."+classNameOfField).css("border-color", "black");
     $("#errorMessage").css("display", "none");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<form id="form" name="form" method="post" action="mail/men-measure.php" class="measureinput-inner">
  <div class="content">

    <div id="wizard">
      <h2>Personal Detail</h2>
      <section class="tabs-continners">        
          <input type="name" class="measureinput0" placeholder="Enter Name" id="acrossfront" name="across-front"> 
          <input type="email" class="measureinput0" placeholder="Enter Email" id="acrossfront" name="email">
      </section>
      <h2>Across Front</h2>
      <section class="tabs-continners">        
          <input type="text" class="measureinput0" placeholder="Enter Measurement In cm" id="acrossfront" name="across-front">          
      </section>

      <h2>Across Back</h2>
      <section class="tabs-continners">        
          <input type="text" class="measureinput1" placeholder="Enter Measurement in cm" id="across-back" name="across-back">          
      </section>

      <h2>Bundi Length</h2>
      <section class="tabs-continners">        
          <input type="text" class="measureinput2" placeholder="Enter Measurement in cm" id="bundi-length" name="bundi-length">
      </section>

      <h2>Bandhgala Length</h2>
      <section class="tabs-continners">        
          <input type="text" class="measureinput3" placeholder="Enter Measurement In cm" id="bandhgala-length" name="bandhgala-length" required>          
      </section>
<span id="errorMessage" style="display:none;color:red;"> Maximum 3 digits are allowed</span>
    </div>
  </div>
</form>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用数组更改3位数字中的每个数字

如何在C / C ++中最多计算1000位数字中的位数

Javascript正则表达式,仅允许使用最多10位数字,字符串和特殊字符

C#如何验证字符串属性以仅接受10位数字

如何使正则表达式进入文本框以仅允许数字(最多4位数字)到小数点后2位?

在Powershell中,如何从电子邮件主题行中仅提取7位数字?

在Spring中使用验证在毫秒时间将ZonedDateTime字段限制为3位数字

如何使用 itertools 获得 3 位或 4 位数字的排列?

如何在HTML文本框中仅允许4位数字?

如何从Excel单元格中仅提取5位数字字符串?

如何从python列表中删除仅零位数字?

如何在逗号(。)后仅允许2位数字和1位数字?

您如何识别文本中的一组2位或3位数字?PostgreSQL的

如何验证只有 2 位数字的输入数字并允许用户使用 JQuery 输入点数字?

使用python regex仅获取9位数字

如何通过使用jQuery在文本框中仅允许数字和两位数的小数

如何将数字转换为3位数字

用户键入时如何在本机TextInput中的每3位数字中添加点?

是否可以使用正则表达式从每个两位数字中获取最后一位数字?

正则表达式使用仅具有3位数字索引的列表元素替换不起作用

如何使用 JQuery 验证文本

如何使用连字符验证13位数字的电话号码?

如何获取仅必要位数的1的补码,而不是获取Java中数字的所有32位表示的补码?

如何在PHP中生成具有3位数字且每个数字没有双数的唯一数字

如何使JavaScript和JQuery在几天内显示3位数字

如何使用32位计算机在PHP中打印40位数字

如何在每3位数字后添加逗号?

如何在每3位数字后添加点(。)?

如何在lc3中添加2个数字以获得4位数字的总和?