在没有 JQuery 的情况下验证密码和确认密码

Question

我想验证并确认以下表格中的密码。我正在使用一个按钮作为提交。我已经尝试过多次但都失败了。我想我会寻求帮助。

`<form>
<h1>Sign Up</h1>
<input type="text" placeholder="First Name" required>
<input type="text" placeholder="Last Name" required>
<input type="email" placeholder="Email" id="email" name="email" pattern="[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*" title="username@domain.com" required>
<input type="password" name="pwd1" placeholder="Password" required>
<input type="password" name="pwd2" placeholder="Confirm Password" required>
<p>Passwords must contain at least eight characters, including uppercase, lowercase letters, numbers, and special characters.</p>
<button type="submit" ><i class="fa fa-user-plus"></i> Sign Up</button>
</form>`

Answer 1

您可以使用 https://jqueryvalidation.org/documentation/ 它很容易实现并帮助您实现其他验证：

<form class="cmxform" id="commentForm" method="get" onSubmit="return $('#commentForm').validate();" action="">
  <fieldset>
  <p>
    <label for="password">Password (required)</label>
      <input id="password" name="password"  type="text" required>
  </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>

// Wait for the DOM to be ready
$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("#commentForm").validate({
    // Specify validation rules
    rules: {
      password: {
        required: true,
        minlength: 5,
                pwcheck: true
      }
    },
    // Specify validation error messages
    messages: {
      password: "Passwords must contain at least eight characters, including uppercase, lowercase letters, numbers, and special characters."
    },
    submitHandler: function(form) {
      form.submit();
    }
  });
   $.validator.addMethod("pwcheck", function(value) {
            return /^[A-Za-z0-9\d=!\-@._*]*$/.test(value) // consists of only these
           && /[a-z]/.test(value) // has a lowercase letter
           && /\d/.test(value) // has a digit
            });
});

JS fiddle link : http://jsfiddle.net/av7ygwu4/3/

我希望这会奏效

Answer 2

您可以使用 Javascript;

var password = document.getElementByName("pwd1")[0].value
//1.At least One capital letter
var passwordCapital=/[A-Z]/.test(password)

    if(passwordCapital == true){
        //code here
}
    else{   
        //code here
    }


//2.At least One small
//Checking for presence of one small letter
var passwordSmall = /[a-z]/.test(password);
    if(passwordSmall == true){
        //code here
}
    else if(vpassSmall==true){
        //code here
}

//3.At least One numeric value
//Checking for presence of a number
var passwordNumber = /[0-9]/.test(password)
    if(passwordNumber == true){
 //code here
}
    else{
        //code here
    }
}
//4.Check password length
var passwordlength=password.length
    if( passwordlength <8 ){
        //code here
}
    else{
        //code here
    }

最后检查是否满足所有条件，您可以使用多种方法，例如：

//This is the length check
var passwordlength=password.length
    if( passwordlength <8 ){
        var pass="OK"; //If condtion is met this variable will store an Ok as a value
}
    else{
        var pass = "NO" //If the condition is not met then the the pass variable will store NO as a value
    }

所以最后要验证是否满足所有条件，只需检查变量存储的值即可：

function check(){
if(pass=="OK"){
return true;}
else{
return false
}

然后为了防止表单提交错误信息使用：

<form onSubmit="return check()">

Answer 3

这成功了，谢谢 Luqman！

HTML:

<form action="welcome.php" method="post" onsubmit="return pwdcheck()">
<h1>Sign Up</h1>
<input type="text" placeholder="First Name" required>
<input type="text" placeholder="Last Name" required>
<input type="email" placeholder="Email" id="email" name="email" pattern="[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*" title="username@domain.com" required>
<input type="password" name="pwd1" placeholder="Password" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>
<input type="password" name="pwd2" placeholder="Confirm Password" required>
<p>Passwords must contain at least eight characters, including uppercase, lowercase letters and numbers.</p>
<button type="submit" value="Submit"><i class="fa fa-user-plus"></i> Sign Up</button>
</form>

JavaScript:

<script>    
    function pwdcheck(){
        var password = document.getElementsByName("pwd1")[0].value
        
        var passwordCapital=/[A-Z]/.test(password)
        if(passwordCapital == true){
            var passwordSmall = /[a-z]/.test(password)
            if(passwordSmall == true){
                var passwordNumber = /[0-9]/.test(password)
                if(passwordNumber == true){
                    var passwordlength=password.length
                    if( passwordlength >=8 ){
                        var confirmPassword = document.getElementsByName("pwd2")[0].value
                        if(password == confirmPassword){
                            var pass="OK"
                        }
                        else{
                            var pass="NO"
                        }
                    }
                    else{
                        var pass="NO"
                    }
                }
                else{
                    var pass="NO"
                }
            }
            else{
                var pass="NO"
            }
        }
        else{   
            var pass="NO"
        }

        
        if(pass=="OK"){
            return true
        }
        else{
            return false
        }           
    }
</script>

在没有 JQuery 的情况下验证密码和确认密码

Validating Password and Confirm Password without JQuery

html

javascript

passwords

validation