Check Password Length – Password Field එක Featured කරන හැටි – 1

Share with your friends!

Web User Login Form වල validation part එක තමයි ගොඩක්ම වැදගත්. Validation එකේ තියන functionalities අනුව Application එකේ හෝ site එකේ user Friendliness එක measure වෙන්නේ. මේ පොස්ට් එකේ විස්තර වෙන්නේ මේ වගේ featured password field එකක් හදාගන්න විදිය. web coding වලදී මේ දේ කරන්න Javascript භාවිතා කරන්න පුළුවන්.

කලින් ලිව්ව පොස්ට් එක මෙතනින් බලන්න පුළුවන්.

මේ පොස්ට් එකේදී කියන්නේ password length එක validate කරගන්නේ කොහොමද කියලා.මුලින්ම UI එක code කරගන්න ඕන කලින් වගේම.

[code language=”html”]
<div id = "content">
<fieldset>
<legend>Password Length Check</legend>
<form>
<input type="password" id="pass" onkeypress = "textChanged()">
<div id = "text">Enter Password</div>
</form>
</fieldset>
</div>
[/code]

මේ තියෙන්නේ style එක.

[code language=”css”]
<style type="text/css">
#content{
width: 270px;
}

#text{
height: 10px;
}

#pass{
width: 250px;
}
</style>
[/code]

මේ විදියේ UI එකක් ලැබෙයි.

දැන් බලමු functional part එක code කරගන්නේ කොහොමද කියලා.

[code language=”javascript”]
<script type="text/javascript">
function textChanged(){
var pass = document.getElementById("pass");
var text = document.getElementById("text");

if(pass.value.length < 8){
text.innerHTML = "Should have more than 8 characters";
text.style.color = "red";
}else{
text.innerHTML = "Fine Password";
text.style.color = "green";
}
}
</script>
[/code]

මේ code එක body tag එකට උඩින් ලියන්න ඕන.කැමති නම් මේ Javascript code එකයි, style එකයි separate file වල තියාගන්න පුළුවන්.

දැන් text box එකේ type කරලා බලන්න පුළුවන්. Characters count එක 8ට වැඩිය අඩු වෙද්දී text එකේ color එකයි, text එකයි වෙනස් වෙයි.

Characters count එක 8ට වැඩිය වැඩි වෙද්දී text එකේ color එකයි, text එකයි වෙනස් වෙයි මේ විදියට.

ගැටළු සහ අපැහැදිලි තැන් තියනවා නම් comment එකකින් කියන්න අමතක කරන්න එපා.

Share with your friends!