JavaScript validation for username and password

Question

The requirements are:

1. Check the user to enter a username that begins with a character[a-zA-Z] and Check the user to enter a username that is 3 or more alphanumeric characters.
2. require the user to enter a password that is 8 or more characters where at-least 1 uppercase letter And 1 number AND 1 of the special characters (/ -+!@#$^& ).
3. AND password and the confirm password input is same.

I have done for the email and required inputs but is confused on how to do this in JavaScript.

This is what i have done:

<script>
function validateForm() {
        var nameRegex = /^[a-zA-Z\-]+$/;
    var passregex= /^(?=.{8,})(?=.*[0-9])(?=.*[A-Z])(?=.*[@#$%^&+*!]).*$/;
    var uname = document.myForm.firstName.value.match(nameRegex);
    var firstpassword=document.myForm.password.value;  
    var secondpassword=document.myForm.password2.value;
        var firstpassword = document.myForm.password.value.match(passregex);
    
    if(uname == null){
        if(uname.length<3){
        alert("Username length should be atleast 3 and make sure it starts with A-Z");}
        return false;
  }
  elseif(firstpassword==null){
    if(firstpassword.length<8){  
      alert("Password must be at least 6 characters long.");  
      return false;  
    }
    elseif(firstpassword==secondpassword){
      alert("Please enter same password");  
      return false;  
    }
  }
}
</script>

Answer 1

 function validateForm() { if (document.myForm.userName.value && document.myForm.password.value && document.myForm.confirmpassword.value) { if (document.myForm.password.value === document.myForm.confirmpassword.value) { if (document.myForm.userName.value.length < 3) { alert("Username length should be atleast 3 and make sure it starts with AZ"); return false; } else if (document.myForm.password.value.length < 8) { alert("Password must be at least 6 characters long."); return false; } else { if (new RegExp(/^[A-Za-z][A-Za-z0-9]+$/).test(document.myForm.userName.value) === false) { alert('Username begins with a character[a-zA-Z] '); return false; } else if (new RegExp(/^(?=.*[az])(?=.*[AZ])(?=.*\\d)(?=.*[#$@!%&*?])[A-Za-z\\d#$@!%&*?]{8, 30}$ /).test(document.myForm.password.value)) { alert("password is 8 or more characters where at-least 1 uppercase letter And 1 number AND 1 of the special characters (/-+!@#$^&)"); return false; } else { alert('Success !'); return true; } } } else { alert("password & confirm password not match!"); return false; } } else { alert("Please add valid credentials.."); return false; } }

 <form name="myForm" action="main.html" method="post"> <!-- onSubmit="return validateForm();" --> <label>User name</label><br /> <input type="text" name="userName" placeholder="userName" /> <br /> <label>Password</label><br /> <input type="password" name="password" placeholder="password" /> <br /> <label>Confirm Password</label><br /> <input type="password" name="confirmpassword" placeholder="confirm password" /> <br /> <input type="button" value="Login" onclick='validateForm();' /> </form>

Note:- I have added all your points please let me know incase something went wrong!

Answer 2

Try to use jQuery Validation( https://jqueryvalidation.org/ ). It can be easily implemented.

Answer 3

查看我的文章，我确实使用 javascript 以更优化和更简单的方式提供了解决方案： https : //dev.to/emmanuelonah/how-to-dynamically-validate-form-input-using-regexp-and-object -evaluator-regexp-form-validation-44a7