个人中心
gpt4 book ai didi

JavaScript - for 循环不适用于 setCustomValidity

转载 作者：行者123 更新时间：2023-11-28 06:36:58 24 4
gpt4 key购买 nike

我制作了一个简单的 HTML form 并希望对其进行自定义验证。我正在使用 for 循环来检查所有的正则表达式，但无论 if 语句中的 true 或 false，它都会在第一次检查后停止。我哪里出错了？

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    <meta name="udacity-grader" content="https://udacity.github.io/course-web-forms/lesson2/quizCustomValidity/grader/tests.json" libraries="jsgrader" unit-tests="https://udacity.github.io/course-web-forms/lesson2/quizCustomValidity/grader/unit_tests.js">
    <title>Quiz - setCustomValidity</title>
</head>
<body>
    <div class="container">
        <h3>Create a new password</h3>
        <p>Password should meet the following requirements:</p>
        <ul>
            <li>16-100 characters (longer is better)</li>
            <li>At least one of these symbols: !, @, #, $, %, ^, &, *</li>
            <li>At least one number</li>
            <li>At least one lowercase letter</li>
            <li>At least one uppercase letter</li>
        </ul>        
        <form class="form-inline">
            <div class="form-group">
                <label class="sr-only">New password</label> 
                <input class="form-control" id="first" type="text" maxlength="100" placeholder="New password" autofocus>    
            </div>
            <div class="form-group">
                <label class="sr-only">Repeat password</label> 
                <input class="form-control" id="second" type="text" minlenght="16" maxlength="100" placeholder="Repeat password"> 
            </div>
            <button class="btn btn-default" id="submit" type="submit">Submit</button>
        </form>
    </div> <!-- container -->
    
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script src="app.js"></script>
</body>
</html>

app.js

var firstPasswordInput = document.querySelector('#first');
var secondPasswordInput = document.querySelector('#second');
var submit = document.querySelector('#submit');
var constraint = new RegExp;
var constraints = [
  [/[\!\@\#\$\%\^\&\*]/g, "No match one of the required symbols"],
  [/\d/g, "No match a number"],
  [/[a-z]/g, "No match a lowercase letter"],
  [/[A-Z]/g, "No match an uppercase letter"],
];

function checkPass () {
  for (var i in constraints) {
    constraint = constraints[i];
    
    console.log(constraint[0]);         
    console.log(constraint[0].test(firstPasswordInput.value));
    console.log(firstPasswordInput.value);
    console.log("\n");
  
    if (constraint[0].test(firstPasswordInput.value)) {
      firstPasswordInput.setCustomValidity('');
    } else {
      firstPasswordInput.setCustomValidity(constraint[1]);
      firstPasswordInput.checkValidity();
      return 1;
    }  
  }  
  return 0;
}

window.onload = function () {
    firstPasswordInput.oninput = checkPass;
}

现场演示:

https://googledrive.com/host/0B5kseRGPxGVEbWN6RzJReTB4RWc

最佳答案

存在多个问题，例如在正则表达式中使用全局标志，因此请尝试

var firstPasswordInput = document.querySelector('#first');
var secondPasswordInput = document.querySelector('#second');
var form = document.querySelector('form');
var submit = document.querySelector('#submit');
var constraint = new RegExp;
var constraints = [
  [/[!@#$%^&*]/, "No match one of the required symbols"],
  [/\d/, "No match a number"],
  [/[a-z]/, "No match a lowercase letter"],
  [/[A-Z]/, "No match an uppercase letter"],
];

function checkPass(isSubmit) {
  firstPasswordInput.setCustomValidity('');
  constraints.some(function(constraint) {
    if (!constraint[0].test(firstPasswordInput.value)) {
      firstPasswordInput.setCustomValidity(constraint[1]);
      return true;
    }
  });
  if (!firstPasswordInput.checkValidity()) {
    !isSubmit && submit.click();
    return false;
  } else {
    return true;
  }
}

window.onload = function() {
  firstPasswordInput.oninput = checkPass;
  form.onsubmit = function(){
  	return checkPass(true);
  }
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="container">
  <h3>Create a new password</h3>
  <p>Password should meet the following requirements:</p>
  <ul>
    <li>16-100 characters (longer is better)</li>
    <li>At least one of these symbols: !, @, #, $, %, ^, &, *</li>
    <li>At least one number</li>
    <li>At least one lowercase letter</li>
    <li>At least one uppercase letter</li>
  </ul>
  <form class="form-inline">
    <div class="form-group">
      <label class="sr-only">New password</label>
      <input class="form-control" id="first" type="text" maxlength="100" placeholder="New password" autofocus>
    </div>
    <div class="form-group">
      <label class="sr-only">Repeat password</label>
      <input class="form-control" id="second" type="text" minlenght="16" maxlength="100" placeholder="Repeat password">
    </div>
    <button class="btn btn-default" id="submit" type="submit">Submit</button>
  </form>
</div>
<!-- container -->

关于JavaScript - for 循环不适用于 setCustomValidity，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34193100/

24 4 0
文章推荐： html - 使用 imgs/slider 调整动态 DIV 的大小 - 最大宽度未按计划运行
文章推荐： c++ - 可靠地将字符串转换为 double 并返回
文章推荐： html - 根据名称更改字体
文章推荐： c++ - 按钮和 ON_MESSAGE
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com