使用parsley js進行表單驗證。 字母數字和密碼確認

Question

當前正在使用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" alt="step one image"> </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> 

並且都是字母數字。

Answer 1

使用data-parsley-equalto和data-parsley-type="alphanum"應該很容易