This article will show you how you can use a password
strength meter in your asp.net mvc using jQuery, c#.net. In this I will show if
password is weak at that time you will not be able to submit form otherwise you
will be able to submit the form.
Some of my previous articles are as follows: Error
Handling in Windows Application Using C#.Net, Restrict
User to Enter Only Negative, Non-Negative and Decimal Number in TextBox Using
C#.Net in Windows Application, Dynamically
Add textbox control on button click in windows application using C#.net and
VB.net, Paging
in DataGridview Using C#.Net In Windows Application, Bind
And Display Image in a DatagridView Using C#.Net in Windows Application, Pass
Value From One Form to Another Form in Windows Application C#.Net,VB.Net.
So for this article first we will create a new asp.net mvc
application and add a controller class file. Now add the below code into your
controller.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcApplication1.Controllers
{
public class HomeController
: Controller
{
//
// GET:
/Home/
public
ActionResult Index()
{
return
View();
}
[HttpPost]
public
ActionResult Index(string Password)
{
ViewBag.Message = "Password entered by you :" +
Password;
return
View();
}
}
}
|
In above code while post back I am capturing the entered
password and then passing it to view by storing in viewbag.
Now create a view and add the below code.
@{
ViewBag.Title = "Password Strength Validation in Asp.net MVC Using jQuery";
}
<script src="../../Scripts/jquery.js"
type="text/javascript"></script>
<script src="../../Scripts/passwordStrengthMeter.js"
type="text/javascript"></script>
<script language="javascript">
var
result = "";
jQuery(document).ready(function () {
$('#txtpassword').keyup(function () {
$('#result').html(passwordStrength($('#txtpassword').val(), ""))
result = $('#result').html();
if
(result == "Too short") {
$('#result').attr({
'style': 'color:Red;'
});
}
if
(result == "Bad") {
$('#result').attr({
'style': 'color:Olive;'
});
}
if
(result == "Good") {
$('#result').attr({
'style': 'color:Lime;'
});
}
if
(result == "Strong") {
$('#result').attr({
'style': 'color:Green;'
});
}
})
})
function
ValidateForm() {
if
(result == "Good" || result == "Strong") {
return
true;
}
else
{
alert("Password
not strong.");
return
false;
}
}
</script>
@using
(Html.BeginForm("Index", "Home"))
{
<div>
Password: @Html.Password("Password",
"", new
{ @Id = "txtpassword" })
<span id='result'></span>
</div>
<br />
<div style="text-align:center">
<input type="submit" value="Submit" onclick="javascript:return ValidateForm();"/></div>
<div style="color:Red;font-weight:bold;">@ViewBag.Message</div>
}
|
In above code I have used passwordStrengthMeter jQuery plugging
to validate the password. As per result I am checking the value and then making
changes in status color.
On submit I am validating what the status and as per result I
am allowing user to submit the form.
DOWNLOAD
About the Author
Where is the code for passwordStrengthMeter.js
ReplyDelete