使用符号" *"验证密码

时间:2018-02-13 11:03:03

标签: javascript html5

我有这个代码重置密码:首先应该输入新密码并确认:



<form name="form">

  <div class="authenticationLogPswd">
    <div class="group">
      <input type="password" name="password" ng-model="password" id="password" required="required" title="Password must contain at least 12 characters, at least one lowercase letter,at least one capital letter, at least one number" pattern="(?=.*\d)(?=.*[a-z])(?=.*[!@#$%^&*()_+])(?=.*[A-Z]).{12,}"
        onchange="this.setCustomValidity(this.validity.patternMismatch ? this.title : ''); if(this.checkValidity()) form.password_confirm.pattern =  RegExp.escape(this.value);">
      <span class="highlight"></span> <span class="bar"></span> <label>New Password</label>
    </div>
    <div class="group">

      <input type="password" name="password_confirm" oninput="check(this)" ng-model="account.password" required="required" pattern="(?=.*\d)(?=.*[a-z])(?=.*[!@#$%^&*()_+])(?=.*[A-Z]).{12,}" onchange="this.setCustomValidity(this.validity.patternMismatch ? this.title : '');">
      <span class="highlight"></span> <span class="bar"></span> <label> Confirm New Password</label>


    </div>
  
    <div class="submit">
      <input type="submit" name="commit" class="btn btn-submit btn-block btn-large" value="save & proceed " />
    </div>

  </div>
</form>
&#13;
&#13;
&#13;

我想添加一个明星&#34; &#34;如果密码不符合标准,则为红色,并且为绿色星级&#34; &#34;如果密码是对的。如何做到这一点,提前谢谢

1 个答案:

答案 0 :(得分:-1)

$(document).ready(function() {
  $('#impPassId').hide();
  $('#impConfPassId').hide();

  $('#password').keyup(function() {

    this.setCustomValidity(this.validity.patternMismatch ? this.title : '');
    if (this.checkValidity()) {
      $('#impPassId').hide();
      return false;
    }
    $('#impPassId').show();
  });
  $('#confpassword').keyup(function() {
    var pass = $('#password').val();
    var confpass = $('#confpassword').val();
    this.setCustomValidity(this.title);
    if (pass !== confpass) {
      this.checkValidity();
      $('#impConfPassId').show();
      return false;
    }
    $('#impConfPassId').hide();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="form">

  <div class="authenticationLogPswd">
    <!-- <form action=""> -->
    <div class="group">
      <input type="password" name="password" ng-model="password" id="password" required="required" title="Password must contain at least 12 characters, at least one lowercase letter,at least one capital letter, at least one number" pattern="(?=.*\d)(?=.*[a-z])(?=.*[!@#$%^&*()_+])(?=.*[A-Z]).{12,}">
      <span id="impPassId"><font color="red">*</font></span> <span class="bar"></span> <label>New Password</label>
    </div>
    <div class="group">

      <input type="password" name="password_confirm" required="required" id="confpassword" title="Confirm Password must same as password" pattern="">
      <span id="impConfPassId"><font color="red">*</font></span> <span class="bar"></span> <label> Confirm New Password</label>

    </div>
    <div class="group" id="messagesss">
      <h5>* Password must </h5><br>
      <p id="letter" class="invalid"> Contain at least <b> 12 alphanumeric characters</b>.</p>
      <p id="capital" class="invalid"> Contain <b> both upper and lower case letters</b>.</p>
      <p id="number" class="invalid"> Contain at <b> least one number</b> (for example, 0-9).</p>
      <p id="length" class="invalid"> Contain at <b> least one special character</b> (for example $*@).</p>
    </div>
    <div class="submit">
      <input type="submit" name="commit" id="submitButton" class="btn btn-submit btn-block btn-large" value="save & proceed " />
    </div>
    <!-- </form> -->
  </div>

其解决方案。