Try looking into jQuery's AJAX function. Upon submission of the login form, send the username and password combo to http://universe.tc.uvu.edu/cs2550/assignments/PasswordCheck/check.php as follows. Nội dung chính Show - JavaScript : HTML Form
validation - checking for password
- To check a password between 7 to 16 characters which contain only characters, numeric digits, underscore and first character must be a letter
- To check a password between 6 to 20 characters which contain at least one numeric digit, one uppercase and one lowercase letter
- To check a password between 7 to 15 characters which contain at least one numeric digit and a special character
- To check a password between 8 to 15 characters which contain at least one lowercase letter, one uppercase letter, one numeric digit, and one special character
- How do you validate login form using Javascript?
- How do I find my username and password in HTML?
- What is password validation in Javascript?
- How do I validate a username in node JS?
<form id="formLogin" method="post" name="myform">
<label>User Name:</label>
<input type="text" name="username" id="username">
<label>Password:</label>
<input type="password" name="password" id="password">
<input type="submit" value="Login" id="submit">
<input type="reset" value="Reset">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$('#formLogin').submit(function(e) {
e.preventDefault();
var username = $('input#username').val();
var password = $('input#password').val();
if(password == ""){
alert("Please enter a Password");
$('#password').focus();
return false;
}
if(username == ""){
alert("Please enter a Username");
$('#username').focus();
return false;
}
if(username != '' && password != '') {
$.ajax({
url: 'http://universe.tc.uvu.edu/cs2550/assignments/PasswordCheck/check.php',
type: 'POST',
data: {
username: username,
password: password
},
success: function(data) {
console.log(data);
// It looks like the page that handles the form returns JSON
// Parse the JSON
var obj = JSON.parse(data);
if(obj.result != 'invalid') {
alert("Login succeeded");
// You should redirect the user too
window.location = 'http://redirecturl.com';
}
}
});
}
});
</script>
This effectively validates your form submission. I prefer
using the jQuery library as opposed to raw JS. You should look into it too. It's also worth noting that forms must ALWAYS be validated on the server side as well. Because a client could always just disable JavaScript in their browser to bypass your front end validation. As mentioned by someone who commented on your question, your method of backend validation is pretty insecure. Raw values of passwords should never be stored. Rather, it's good to use an sha1 hash of the password so that if
an unwanted user somehow hacks into your DB he/she doesn't have all of the passwords stored in there. Also, username/password combination validation works a lot smoother on the backend if you just do something like // Connect to the DB
$con = mysqli_connect('localhost', 'user', 'pass', 'db');
// Escape the form values or user prepared statements
$username = mysqli_real_escape_string($con, $username);
$password = mysqli_real_escape_string($con, $password);
$sql = "SELECT * FROM users WHERE username = '".$username." AND password = '".$password."'";
$result = mysqli_query($con, $sql);
$count = mysqli_num_rows($result);
if($count == 1) {
echo "Success";
} else {
echo "Fail";
}
instead of using a static list. Last update on August 19 2022 21:50:37 (UTC/GMT +8 hours)Sometimes a password validation in
a form is essential. You can create a password in different ways, it's structure may be simple, reasonable or strong. Here we validate various type of password structure through JavaScript codes and regular expression. - Check a password between 7 to 16 characters which contain only characters, numeric digits and underscore and first character must be a letter.
- Check a password between 6 to 20 characters which contain at least one numeric digit, one
uppercase and one lowercase letter.
- Check a password between 7 to 15 characters which contain at least one numeric digit and a special character.
- Check a password between 8 to 15 characters which contain at least one lowercase letter, one uppercase letter, one numeric digit, and one special character.
Following code blocks contain actual codes for the said validations. We have kept the CSS code part common for all the validations. CSS
Code: li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
}
.mail h2 {
margin-left: 38px;
}
input {
font-size: 20pt;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 12pt;
}
.rq {
color: #FF0000;
font-size: 10pt;
}
To check a password between 7 to 16 characters which contain only characters, numeric digits, underscore and first character must be a letterTo validate the said format we use the regular expression ^[A-Za-z]\w{7,15}$, where \w matches any word character (alphanumeric) including the underscore (equivalent to
[A-Za-z0-9_]). Next the match() method of string object is used to match the said regular expression against the input value. Here is the complete web document. HTML Code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
title>JavaScript form validation - Password Checking - 1</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Password and Submit [7 to 15 characters which contain only characters, numeric digits, underscore and first character must be a letter]</h2
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li class="rq">*Enter numbers only.</li>
<li> </li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="CheckPassword(document.form1.text1)"/></li>
<li> </li>
</ul>
</form>
</div>
<script src="check-password-1.js"></script>
</body>
</html>
JavaScript Code: function CheckPassword(inputtxt)
{
var passw= /^[A-Za-z]\w{7,14}$/;
if(inputtxt.value.match(passw))
{
alert('Correct, try another...')
return true;
}
else
{
alert('Wrong...!')
return false;
}
}
View the example in the browser To check a password between 6 to 20 characters which contain at
least one numeric digit, one uppercase and one lowercase letterTo validate the said format we use the regular expression ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,8}$. Next the match() method of string object is used to match the said regular expression against the input value. Here is the complete web document. HTML Code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - Password Checking - 2</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Password and Submit [6 to 20 characters which contain at least one numeric digit, one uppercase and one lowercase letter]</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li class="rq">*Enter numbers only.</li>
<li> </li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="CheckPassword(document.form1.text1)"/></li>
<li> </li>
</ul>
</form>
</div>
<script src="check-password-2.js"></script>
</body>
</html>
JavaScript Code: function CheckPassword(inputtxt)
{
var passw = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/;
if(inputtxt.value.match(passw))
{
alert('Correct, try another...')
return true;
}
else
{
alert('Wrong...!')
return false;
}
}
View the example in the browser To check a password between 7 to 15 characters which contain at least one numeric digit and a special characterTo validate the said format we use the regular expression ^^(?=.*[0-9])(?=.*[[email protected]#$%^&*])[[email protected]#$%^&*]{7,15}$. Next the match() method of string object is used to match the said regular expression against the input
value. Here is the complete web document. HTML Code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - Password Checking - 3</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Password and Submit [7 to 15 characters which contain at least one numeric digit and a special character]</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li class="rq">*Enter numbers only.</li>
<li> </li>
<li><input type="submit" name="submit" value="Submit" onclick="allnumericplusminus(document.form1.text1)" /></li>
<li> </li>
</ul>
</form>
</div>
<script src="check-password-3.js"></script>
</body>
</html>
JavaScript Code function CheckPassword(inputtxt)
{
var paswd= /^(?=.*[0-9])(?=.*[[email protected]#$%^&*])[[email protected]#$%^&*]{7,15}$/;
if(inputtxt.value.match(paswd))
{
alert('Correct, try another...')
return true;
}
else
{
alert('Wrong...!')
return false;
}
}
View the example in the browser To check a password between 8 to 15 characters which contain at least one lowercase letter, one uppercase letter, one numeric digit, and one special character
To validate the said format we use the regular expression ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$. Next the match() method of string object is used to match the said regular expression against the input value. Here is the complete web document. HTML Code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - Password Checking - 4</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input Password and Submit [8 to 15 characters which contain at least one lowercase letter, one uppercase letter, one numeric digit, and one special character]</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li class="rq">*Enter numbers only.</li>
<li> </li>
<li><input type="submit" name="submit" value="Submit" onclick="allnumericplusminus(document.form1.text1)" /></li>
<li> </li>
</ul>
</form>
</div>
<script src="check-password-4.js"></script>
</body>
</html>
JavaScript Code: function CheckPassword(inputtxt)
{
var decimal= /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/;
if(inputtxt.value.match(decimal))
{
alert('Correct, try another...')
return true;
}
else
{
alert('Wrong...!')
return false;
}
}
View the example in the browser Download the Validation code from herePrevious: JavaScript: HTML Form - Credit Card Number validation
Next: JavaScript: HTML Form - IP address validation The user will not be forwarded to the next page until given values are correct.. <script>. function validateform(){. var name=document.myform.name.value;. var password=document.myform.password.value;. if (name==null || name==""){. alert("Name can't be blank");. return false;. }else if(password.length<6){. How do I find my
username and password in HTML?This can be done by document. getElementById() function, which selects an element by its id. var text1 = document. getElementById("username"); What is password validation in Javascript?It checks that the password entered by the user is same as this confirm password fields. To create a valid password, both the password and confirm password fields value must be
matched. First one, we will check for a valid password and then confirm password validation checks. How do I validate a username in node JS?body. username; var password = sReq. body. password; if (username=='myusername' && password == 'mypassword') { // do something here with a valid login } else { // user or password doesn't match } });
| 
