如何使多步骤表单验证适用于密码？

Question

好的，对于初学者来说，我使用https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_form_steps作为表单的基础并对其进行了修改（请参见下文），如果字段是空白，下一个按钮不起作用，但是，如果我尝试添加密码所需的模式，它什么也不做。 有人可以帮忙吗？ 注意：我确实有第二个脚本“ vue.js”，用于显示已满足哪些要求 （由于字数限制，还必须从最后一步中删除一部分代码

  <form id="regForm" action="/action_page.php"> <!-- One "tab" for each step in the form: --> <div class="tab"> <h3 class="text-center">Lets Get You Registered</h3> <div class=" pt-25 pb-30 container"> <div class="col-md-5 col-sm-6 "> <h3>Billing Information</h3> <!--<div class="choose-us-image"> <img src="images/other/left.png" alt=""> </div>--> <ul> <li style="width: 48%"><label>First Name:</label><br><input type="textt" name="FirstName"></li> <li style="width: 49%"><label style="padding-top:7px;">Last Name:</label><br><input type="textt" Name="LastName"></li> <li style="width: 98%"><label style="padding-top:7px;">Address:</label><br><input type="textt" name="Address"></li> <!-- <li style="width: 65%"><label style="padding-top:7px;">Address 2:</label><br><input type="textt" id="address2" name="adress2" style="display: none;" ></li>--> <li><label style="padding-top:7px;">City:</label><br> <input style="width:125px; " type="textt" name="City"></li> <li ><label style="padding-top:7px;">State:</label><br> <input style="width:65px; " maxlength="2" type="textt" name="State"></li> <li><label style="padding-top:7px;">Zip Code:</label><br> <input style="width:76px; " type="textt"></li> <li style="width: 35%"><label>Phone Number:</label><br><input type="textt"></li> </ul> </div> <div class="col-md-5 col-sm-6 pull-right "> <h3>Account Setup</h3> <!--<div class="choose-us-image"> <img src="images/other/left.png" alt=""> </div>--> <ul> <li style="width: 100%"><label style="padding-top:7px;">Email:</label><br><input type="textt" name="Email"></li> <li style="width: 100%"><label>Username</label><br><input type="textt" name="Username"></li> <li style="width: 100%"><div id="app" > <label class=" " for="password">Password</label> <input placeholder="Enter your password" name="password" id="pass" class="frmField" type="password" @input="password_check" v-model="message" required/> <label class="contained">Show Password <input type="checkbox" class="checkbox" onclick="myFunction()"/> <span class="checkmark"></span> <a style="font-size: 10px; float: right;" href="#containx" data-reveal-id="exampleModal"> Already Have a account? Sign in <u>here</u></a></label> <p class="frmValidation" :class="{'frmValidation--passed' : message.length > 7}"><i class="frmIcon fas" :class="message.length > 7 ? 'fa-check' : 'fa-times'"></i> Longer than 7 characters</p> <p class="frmValidation" :class="{'frmValidation--passed' :has_uppercase }"><i class="frmIcon fas" :class="has_uppercase ? 'fa-check' : 'fa-times'"></i> Has a capital letter</p> <p class="frmValidation" :class="{'frmValidation--passed' :has_lowercase }"><i class="frmIcon fas" :class="has_lowercase ? 'fa-check' : 'fa-times'"></i> Has a lowercase letter</p> <p class="frmValidation" :class="{'frmValidation--passed' : has_number }"><i class="frmIcon fas" :class="has_number ? 'fa-check' : 'fa-times'"></i> Has a number</p> <p class="frmValidation" :class="{'frmValidation--passed' : has_special }"><i class="frmIcon fas" :class="has_special ? 'fa-check' : 'fa-times'"></i> Has a special character</p> </div></li> </ul> </div> </div> <div style="overflow:auto;"> <div> <button type="button" id="prevBtn" onclick="nextPrev(-1)" style="float:left;">Previous</button> <button type="button" id="nextBtn" onclick="nextPrev(1)" style="float:right;">Next</button> </div> </div> </div> <div class="tab"> <h3 class="text-center">Next, Lets Choose a plan</h3> <div class="row ptb-40"> <!-- Pricing table single --> <div class="col-md-3 col-sm-6 col-xs-12 res-pb-xs-30"> <div class="pricing-table-single white-bg"> <div class="table-category text-center"> <h6>Silver pack</h6> <h1>$30<span> / month</span></h1> </div> <div class="pricing-list text-center"> <ul> <li><a href="#">30 messages</a></li> <li><a href="#">One number</a></li> <li><a href="#">Null</a></li> <li><a href="#">Null</a></li> <li><a href="#">Null</a></li> </ul> </div> <div class="order-button text-uppercase text-center" onclick="nextPrev(1)"> <a onclick="base();" >Select</a> </div> </div> </div> <!-- Pricing table single --> <!-- Pricing table single --> <div class="col-md-3 col-sm-6 col-xs-12 res-pb-xs-30"> <div class="pricing-table-single white-bg"> <div class="table-category text-center"> <h6>gold pack</h6> <h1>$50<span> / month</span></h1> </div> <div class="pricing-list text-center"> <ul> <li><a href="#">50 messages</a></li> <li><a href="#">Two Numbers</a></li> <li><a href="#">Null</a></li> <li><a href="#">Null</a></li> <li><a href="#">Null</a></li> </ul> </div> <div class="order-button text-uppercase text-center" onclick="nextPrev(1)"> <a onclick="pro();">Select</a> </div> </div> </div> <!-- Pricing table single --> <!-- Pricing table single --> <div class="col-md-3 col-sm-6 col-xs-12 res-pb-xs-30"> <div class="pricing-table-single white-bg"> <div class="table-category text-center"> <h6>platinum pack</h6> <h1>$90<span> / month</span></h1> </div> <div class="pricing-list text-center"> <ul> <li><a href="#">Unlimited Messages</a></li> <li><a href="#">Unlimited Numbers</a></li> <li><a href="#">Null</a></li> <li><a href="#">Null</a></li> <li><a href="#">Null</a></li> </ul> </div> <div class="order-button text-uppercase text-center" onclick="nextPrev(1)"> <a onclick="ent();">Select</a> </div> </div> </div> <!-- Pricing table single --> <!-- Pricing table single --> <div class="col-md-3 col-sm-6 col-xs-12 res-pb-xs-30"> <div class="pricing-table-single white-bg"> <div class="table-category text-center"> <h6>platinum pack</h6> <h1>$90<span> / month</span></h1> </div> <div class="pricing-list text-center"> <ul> <li><a href="#">Unlimited Messages</a></li> <li><a href="#">Unlimited Numbers</a></li> <li><a href="#">Null</a></li> <li><a href="#">Null</a></li> <li><a href="#">Null</a></li> </ul> </div> <div class="order-button text-uppercase text-center" onclick="nextPrev(1)"> <a onclick="payg();">Select</a> </div> </div> </div> <!-- Pricing table single --> </div> <div style="overflow:auto;"> <div> <button type="button" id="prevBtn" onclick="nextPrev(-1)" style="float:left;">Previous</button> </div> </div> </div> <div class="tab"> <h3 class="text-center">Finally, Lets take care of payment</h3> <div class=" pt-25 pb-30 container"> <div class="col-md-5 col-sm-6 "> <h3>Billing Information</h3> <!--<div class="choose-us-image"> <img src="images/other/left.png" alt=""> </div>--> <ul> <li style="width: 48%"><label>First Name:</label><br><input name="BillingFirstname" type="textt"></li> <li style="width: 49%"><label style="padding-top:7px;">Last Name:</label><br><input name="BillingLastname" type="textt"></li> <li style="width: 98%"><label style="padding-top:7px;">Address:</label><br><input Name="Billingaddress" type="textt" class=""></li> <!-- <li style="width: 65%"><label style="padding-top:7px;">Address 2:</label><br><input type="textt" id="address2" name="adress2" style="display: none;" ></li>--> <li><label style="padding-top:7px;">City:</label><br> <input style="width:125px; " name="Billingcity" type="textt"></li> <li ><label style="padding-top:7px;">State:</label><br> <input style="width:65px; " maxlength="2" type="textt" name="BillingState"></li> <li><label style="padding-top:7px;">Zip Code:</label><br> <input style="width:76px; " type="textt" name="BillingZipcode"></li> <li style="width: 35%"><label>Phone Number:</label><br><input type="textt" name="BillingPhone"></li> </ul> </div> <div class="col-md-5 col-sm-6 pull-right "> <h3 >Payment Information</h3> <ul> <li><label>Name on Card:</label><br><input type="textt" name="Nameoncard"></li> <li style="width:187px"><label style="padding-top:7px;">Card Number</label><br><input maxlength="16" type="textt" name="Cardnumber"></li> <li style="width:26%;padding-right:7px;"><label style="padding-top:7px;">Security Code</label><br><input maxlength="4" type="textt" name="SecurityCode"></li> <li><label style="padding-top:7px;padding-bottom:8px;">Expiration Date</label><br><div class="custom-select" style="width:101px;" name="Expdate"> <select> <option value="0">Month</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="10">November</option> <option value="10">December</option> </select> </div></li> <li><div class="custom-select" style="width:75px;"> <select name=""> <option value="yr">Year</option> <option value="2018">2018</option> <option value="2019">2019</option> <option value="2020">2020</option> <option value="2021">2021</option> <option value="2022">2022</option> <option value="2023">2023</option> <option value="2024">2024</option> <option value="2025">2025</option> <option value="2026">2026</option> <option value="2027">2027</option> <option value="2028">2028</option> <option value="2029">2029</option> <option value="2030">2030</option> <option value="2031">2031</option> <option value="2032">2032</option> <option value="2033">2033</option> <option value="2034">2034</option> <option value="2035">2035</option> <option value="2036">2036</option> <option value="2037">2037</option> <option value="2038">2038</option> <option value="2039">2039</option> <option value="2039">2040</option> </select></div></li> </ul> </div> <!--------Plan Specific--------------------> <!---------------------------------------------------------------------- <!--------- Plan Specific END------------> </div> <div style="overflow:auto;"> <div> <button type="button" id="prevBtn" onclick="nextPrev(-1)" style="float:left;">Previous</button> <button type="button" id="nextBtn" value="submit" style="float:right;">Submit</button> </div> </div> </div> <!-- <div style="overflow:auto;"> <div> <button type="button" id="prevBtn" onclick="nextPrev(-1)" style="float:left;">Previous</button> <button type="button" id="nextBtn" onclick="nextPrev(1)" style="float:right;">Next</button> </div> </div>--> <!-- Circles which indicates the steps of the form: --> <div style="text-align:center;margin-top:10px;"> <span class="step"></span> <span class="step"></span> <span class="step"></span> </div> </form> <div class="" id="containx"> <div action="/action_page.php" id="exampleModal" class="reveal-modal" style="background-color: white;"> <h1>Login</h1> <label for="email"><b>Email</b></label> <input type="textt" placeholder="Enter Email" name="email" required> <label for=""><b>Password</b></label> <input type="password" placeholder="Enter Password" name="" required> <button type="submit" class="btn">Login</button> <a href="#" class="close-reveal-modal pt-10" style="float: right;"> Back to Sign-Up</a> </div> </div> <script> var currentTab = 0; // Current tab is set to be the first tab (0) showTab(currentTab); // Display the crurrent tab function showTab(n) { // This function will display the specified tab of the form... var x = document.getElementsByClassName("tab"); x[n].style.display = "block"; //... and fix the Previous/Next buttons: if (n == 0) { document.getElementById("prevBtn").style.display = "none"; } else { document.getElementById("prevBtn").style.display = "inline"; } if (n == (x.length - 1)) { document.getElementById("nextBtn").innerHTML = "Submit"; } else { document.getElementById("nextBtn").innerHTML = "Next"; } //... and run a function that will display the correct step indicator: fixStepIndicator(n) } function nextPrev(n) { // This function will figure out which tab to display var x = document.getElementsByClassName("tab"); // Exit the function if any field in the current tab is invalid: if (n == 1 && !validateForm()) return false; // Hide the current tab: x[currentTab].style.display = "none"; // Increase or decrease the current tab by 1: currentTab = currentTab + n; // if you have reached the end of the form... if (currentTab >= x.length) { // ... the form gets submitted: document.getElementById("regForm").submit(); return false; } // Otherwise, display the correct tab: showTab(currentTab); } function validateForm() { // This function deals with validation of the form fields var x, y, i, valid = true; x = document.getElementsByClassName("tab"); y = x[currentTab].getElementsByTagName("input"); // A loop that checks every input field in the current tab: for (i = 0; i < y.length; i++) { // If a field is empty... if (y[i].value == "") { // add an "invalid" class to the field: y[i].className += " invalid"; // and set the current valid status to false valid = false; } } // If the valid status is true, mark the step as finished and valid: if (valid) { document.getElementsByClassName("step")[currentTab].className += " finish"; } return valid; // return the valid status } function fixStepIndicator(n) { // This function removes the "active" class of all steps... var i, x = document.getElementsByClassName("step"); for (i = 0; i < x.length; i++) { x[i].className = x[i].className.replace(" active", ""); } //... and adds the "active" class on the current step: x[n].className += " active"; } </script> <script> let app = new Vue({ el: '#app', data:{ message: '', has_number: false, has_lowercase: false, has_uppercase: false, has_special: false, }, methods: { password_check: function () { this.has_number = /\\d/.test(this.message); this.has_lowercase = /[az]/.test(this.message); this.has_uppercase = /[AZ]/.test(this.message); this.has_special = /[!@#\\$%\\^\\&*\\)\\(+=._-]/.test(this.message); } }, }); </script> 

Answer 1

将这些添加到功能详细信息

 var paswd= /^(?=.*\\d)(?=.*[az])(?=.*[AZ])(?=.*[^a-zA-Z0-9])(?!.*\\s).{8,15}$/; inputtxt = document.getElementById("pass") 

另外，将其添加到验证表单功能

  if(inputtxt.value.match(paswd)) { valid = true; } else { document.getElementById("err").innerHTML = ('Your Password did not fulfill requirements listed below'); valid = false; } 

像魅力一样工作！

资料来源： https : //www.w3resource.com/javascript/password-validation.php https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_dom