हेल्लो दोस्तों इस आर्टिकल के माध्यम से हम Input Area Password Validation Project को HTML CSS एवं Java Code से बनायेंगे जिसके माध्यम से बताये गए Input Area के Password वाले आप्शन पर जैसे ही हम कर्सर को रखेंगे तो हमें Password को डालने के लिए हिंट दिया जायेगा
Input Area Password Validation Project Demo
Input Area Password Validation Project Demo
नीचे दिखाए गए Demo में आप देख सकते है
Input Area Password Validation Project CSS Code
नीचे दिए गए CSS Code के माध्यम से आप उक्त Project के Style को Change कर सकते है
input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
}
उपरोक्त कोड के माध्यम से Input Area के बैकग्राउंड एवं अन्य Field को कस्टमाइज करे
input[type=submit] {
background-color: #e83e8c;
color: white;
}
उपरोक्त कोड के माध्यम से Input Area के Submit Button को कस्टमाइज करे
.container {
background-color: #ffc107c9;
padding: 20px;
}
उपरोक्त कोड के माध्यम से Input Area के Container को कस्टमाइज करे
#message {
display:none;
background: #ffc10778;
color: #000;
position: relative;
padding: 20px;
margin-top: 10px;
}
#message p {
padding: 10px 35px;
font-size: 18px;
}
उपरोक्त कोड के माध्यम से Input Area के Password पर क्लिक करने पर Massage आता है उसे कस्टमाइज करे
.valid {
color: green;
}
.valid:before {
position: relative;
left: -35px;
content: "✔";
}
जब आप पासवर्ड वाले आप्शन पर click करेंगे तो एक massage होगा जिसमे पासवर्ड का हिंट दिया रहेगा दिए गए हिंट के अनुसार जब आप पासवर्ड को इनपुट करेंगे तो सही का चेक मार्क के साथ हिंट भी हरा कलर हो जायेगा
.invalid {
color: red;
}
.invalid:before {
position: relative;
left: -35px;
content: "✖";
}
यदि आप बताये गए हिंट के तरह पासवर्ड इनपुट नहीं करेंगे तो उसका कलर Red ही रहेगा
तो इस तरह से Input Area Password Validation Project का CSS Code तैयार हो गया है
Input Area Password Validation Project HTML Code
HTML Code के माध्यम से हम Input Area में लिखे शब्द तथा Massage में दिए गए हिंट को कस्टमाइज कर सकते है
<div class="container">
<label for="usrname">Username</label>
<input type="text" id="usrname" name="usrname" required>
<label for="psw">Password</label>
<input type="password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>
<input type="submit" value="Submit">
</form>
</div>
<div id="message">
<h3>Password must contain the following:</h3>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="length" class="invalid">Minimum <b>8 characters</b></p>
</div>
CSS कोड के बाद उपरोक्त HTML Code को लिखे
Input Area Password Validation Project Java Code
उपरोक्त दोनों Code को लिखने के बाद आपको नीचे दिए गए Java Code को लिखना है
<script>
var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");
myInput.onfocus = function() {
document.getElementById("message").style.display = "block";
}
myInput.onblur = function() {
document.getElementById("message").style.display = "none";
}
myInput.onkeyup = function() {
// Validate lowercase letters
var lowerCaseLetters = /[a-z]/g;
if(myInput.value.match(lowerCaseLetters)) {
letter.classList.remove("invalid");
letter.classList.add("valid");
} else {
letter.classList.remove("valid");
letter.classList.add("invalid");
}
var upperCaseLetters = /[A-Z]/g;
if(myInput.value.match(upperCaseLetters)) {
capital.classList.remove("invalid");
capital.classList.add("valid");
} else {
capital.classList.remove("valid");
capital.classList.add("invalid");
}
var numbers = /[0-9]/g;
if(myInput.value.match(numbers)) {
number.classList.remove("invalid");
number.classList.add("valid");
} else {
number.classList.remove("valid");
number.classList.add("invalid");
}
if(myInput.value.length >= 8) {
length.classList.remove("invalid");
length.classList.add("valid");
} else {
length.classList.remove("valid");
length.classList.add("invalid");
}
}
</script>
उपरोक्त सभी कोड को compile करने के बाद Input Area Password Validation Project तैयार हो जायेगा यदि आप चाहे तो उपरोक्त सभी कोड को नीचे दिए गए Copy Code बटन पर click करके उपरोक्त Demo Project का Source Code को कॉपी कर सकते है