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


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

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

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

<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>

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

<style type="text/css">
	#content{
		width: 270px;
	}

	#text{
		height: 10px;
	}

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

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

toggle-pass-3

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

<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 එක body tag එකට උඩින් ලියන්න ඕන.කැමති නම් මේ Javascript code එකයි, style එකයි separate file වල තියාගන්න පුළුවන්.

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

toggle-pass-4

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

toggle-pass-5

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

Advertisements

2 thoughts on “Check Password Length – Password Field එක Featured කරන හැටි – 1

  1. Pingback: User Login From එකක Password Field එක Featured කරන හැටි – 1 | සතුටු වැස්ස බ්ලොග් කියවනය

  2. Pingback: User Login Form එකක Text Input Field එක Featured කරන හැටි – 1 | dhanushka's blog

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s