在没有 JQuery 的情况下验证密码和确认密码 [关闭]

Posted 2023-02-24

【中文标题】在没有 JQuery 的情况下验证密码和确认密码 [关闭]

【英文标题】：Validating Password and Confirm Password without JQuery [closed]

【发布时间】：2020-10-11 16:39:14

【问题描述】：

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

`<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="[e-mail]" 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>`

【问题讨论】：

你试过什么？你的验证码在哪里？

The html5 placeholder attribute is not a substitute for the label element

【参考方案1】：

成功了，谢谢 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="[e-mail]" 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>

【参考方案2】：

您可以使用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小提琴链接： http://jsfiddle.net/av7ygwu4/3/

我希望这会奏效

【参考方案3】：

你可以使用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()">

【讨论】：

嗨 Luqman，谢谢你，非常好，现在正在处理这个问题。我认为这会奏效。我是否将其包装在一个函数中并在表单中使用 OnClick 来调用它？

它直接将我带到操作页面。

表单 HMTL 如下所示：

Java 函数如下所示： function check() if(pass=="OK") return true; else return false; alert("密码必须至少包含八个字符，包括大写、小写字母和数字。")

它应该是 onSubmit="return check()" 不要忘记检查功能之前的返回词并关闭您的表单..看起来它没有结束标签