使用 parsley js 进行表单验证。字母数字和密码确认

Posted 2023-05-09

【中文标题】使用 parsley js 进行表单验证。字母数字和密码确认

【英文标题】：Form validation with parsley js. Alphanumeric and password confirmation

【发布时间】：2017-03-13 08:47:48

【问题描述】：

目前正在使用 parsley.js 验证多步表单。所有其他必需的属性都可以正常工作并正确验证。我只需要帮助扩展表单验证以确保密码和确认密码字段的值匹配

$(function () 
        var $sections = $('.form-section');
        function navigateTo(index) 
            // Mark the current section with the class 'current'
            $sections
                    .removeClass('current')
                    .eq(index)
                    .addClass('current');
            // Show only the navigation buttons that make sense for the current section:
            $('.form-navigation .previous').toggle(index > 0);
            var atTheEnd = index >= $sections.length - 1;
            $('.form-navigation .next').toggle(!atTheEnd);
            $('.form-navigation [type=submit]').toggle(atTheEnd);
        

        function curIndex() 
            // Return the current index by looking at which section has the class 'current'
            return $sections.index($sections.filter('.current'));
        

        // Previous button is easy, just go back
        $('.form-navigation .previous').click(function() 
            navigateTo(curIndex() - 1);
        );

        // Next button goes forward iff current block validates
        $('.form-navigation .next').click(function() 
            if ($('#individualForm').parsley().validate(group: 'block-' + curIndex()))
                navigateTo(curIndex() + 1);
        );

        // Prepare sections by setting the `data-parsley-group` attribute to 'block-0', 'block-1', etc.
        $sections.each(function(index, section) 
            $(section).find(':input').attr('data-parsley-group', 'block-' + index);
        );
        navigateTo(0); // Start at the beginning
    );

<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.5.1/parsley.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="individualForm" action="" class="indivform" method="post">
                      <div id="individualForm1" class="form-section">


                          </div>

                          <div class="regForm">
                              <div class="form-group formGroup">
                                  <label for="usertype"> Tell us who you are </label>
                                  <select class="form-control allForms" name="usertype" id="usertype">
                                      <option selected>Student</option>
                                      <option>Intern</option>
                                      <option>National Service</option>
                                      <option>Entry-Level Employee</option>
                                      <option>Mid-level Manager</option>
                                      <option>Senior-Level Manager</option>
                                      <option>Executive</option>
                                      <option>Foreign Expert</option>
                                  </select>
                              </div>
                          </div>

                          <div class="form-group formGroup">
                              <label for="email"> Email Address</label>
                              <input type="email"  name="email" id="email" class="form-control allForms" required placeholder="Enter your email address">
                          </div>

                          <div class="row">
                              <div class="col-lg-6 col-md-6 col-sm-6">
                                  <div class="form-group formGroup">
                                      <label for="password"> Password </label>
                                      <input type="password" name="password" id="password" minlength="6" class="form-control allForms" required placeholder="Enter password">
                                  </div>
                              </div>

                              <div class="col-lg-6 col-md-6 col-sm-6">
                                  <div class="form-group formGroup">
                                      <label for="password_confirmation"> Confirm Password </label>
                                      <input type="password"  name="password_confirmation" minlength="6" id="password_confirmation" class="form-control allForms" required placeholder="Re-enter password">
                                  </div>
                              </div>
                          </div>
                      </div>

                      <div id="individualForm2" class="form-section">
                          <div class="text-center stepImages">
                              <img src="img/step-2.png" >
                          </div>

                          <div class="row">
                              <div class="col-lg-6 col-md-6 col-sm-6">
                                  <div class="form-group formGroup">
                                      <label for="firstname"> First Name</label>
                                      <input type="text" name="firstname" id="firstname" class="form-control allForms" required placeholder="Enter first name">
                                  </div>

                                  <div class="form-group formGroup">
                                      <label for="country">Your location</label>
                                      <select class="form-control allForms" name="country" id="country" data-placeholder="Select country">
                                          <option value="0">Getting your location...</option>
                                          @if(isset($countries))
                                              @foreach($countries as $country)
                                                  <option value=" $country->id " title=" $country->country_code "> $country->name </option>
                                              @endforeach
                                          @endif
                                      </select>
                                  </div>
                              </div>

                              <div class="col-lg-6 col-md-6 col-sm-6">
                                  <div class="form-group formGroup">
                                      <label for="lastname">Contact Last Name</label>
                                      <input type="text" name="lastname" id="lastname" class="form-control allForms" required placeholder="Enter last name">
                                  </div>


                                  <div class="genderBox2 form-group formGroup">
                                      <br>
                                      <div class="radio-inline">
                                          <label>
                                              <input type="radio" name="gender" value="Male" checked="" >
                                              Male
                                          </label>
                                      </div>
                                      <div class="radio-inline">
                                          <label>
                                              <input type="radio" name="gender" value="Female">
                                              Female
                                          </label>
                                      </div>
                                  </div>
                              </div>
                          </div>

                          <div class="form-group formGroup">
                              --<div class="pi-col-sm-3">--
                                  <div class="form-group">
                                      <input name="dialcode" id="dialcode"  class="form-control" placeholder="Dial Code" type="text">
                                  </div>
                              --</div>--
                              <div class="form-group">
                                  <input name="dialcode" id="dialcode"  class="form-control" placeholder="Dial Code" required type="text">
                              </div>
                              <label for="individual_phone_number"> Phone Number</label>
                              <input type="text" name="phone" id="individual_phone_number" class="form-control allForms" required data-parsley-type="digits" placeholder="Enter your phone number">
                          </div>
                      </div>

                      <div class="modal-footer modalFooter form-navigation">
                          <button class="previous btn btn-success pull-left" id="newUserSubmitBtn" type="button"> Prev &lt;  </button>
                          <button class="next btn btn-success pull-right" id="newUserSubmitBtn" type="button"> Next &gt; </button>
                          <button class="btn btn-default pull-right" id="individualSubmitBtn" type="submit"> Finish </button>
                          <span class="clearfix"></span>
                      </div>
                  </form>

并且两者都是字母数字。

【参考方案1】：

使用data-parsley-equalto 和data-parsley-type="alphanum" 应该很容易

【讨论】：

感谢@marc-andre 感谢您的评论。 data-parsley-equalto 现在工作正常，但 data-parsley-type="alphanum" 不工作