کد جاوااسکریپت اعتبارسنجی پسورد
سلام یه کد اسکریپت برای وبسایتم میخوام با این مشخصات بلد نیستم خودم بنویسم . فرض کنید میخوایم توی یک سایت ثبت نام کنیم .در قسمت پسورد میخوایم این قوانین رعایت بشه و اگر کاربر اشتباه وارد کرد بهش یه پیام نمایش بده ، این قوانین که تعداد کاراکتر های وارد شده min =6 و max =16 باشه حتما هم از کاراکتر های عددی حروف کوچک و حروف بزرگ انگلیسی استفاده شود ، چه کدی باید نوشت ؟؟؟؟؟؟
4 پاسخ
با سلام
یه صفحه ثبت نام درست کردم اینجوری بهتر متوجه کدها میشید .
اگه با DreamWeaver کار میکنید یه New Site بسازید و دو فایل بنام های Register.php , Check.php بسازید توی فولدر سایتتون و کدهای زیر توی فایل ها قرار بدید .
کد Register.php :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="JQuery.js"></script>
<script type="text/javascript">
$(function()
{
$('#Error1').hide(); //a-zA-Z0-9
$('#Error2').hide(); //Between6_16
$('#OK').hide(); //OK
$("#frm_reg").submit(function()
{
if($("#Pass").val().length >= 6 && $("#Pass").val().length <= 16)
{
$.post("Check.php",
{
Pass : $("#Pass").val()
}, function(data)
{
if(data == false)
{
$('#Error2').hide();
$('#OK').hide();
$('#Error1').show();
}
else
{
$('#Error2').hide();
$('#Error1').hide();
$('#OK').show();
}
}, 'json');
}
else
{
$('#Error1').hide();
$('#OK').hide();
$('#Error2').show();
}
return false;
});
});
</script>
<style type="text/css">
#register
{
direction: rtl;
width: 400px;
border: 2px solid #333;
background-color: #888;
margin: 200px auto;
border-radius: 5px;
box-shadow: 0 0 11px #666;
-moz-box-shadow: 0 0 11px #666;
-webkit-box-shadow: 0 0 11px #666;
-ms-box-shadow: 0 0 11px #666;
-o-box-shadow: 0 0 11px #666;
}
#txt_lbl, #btn
{
padding: 0;
list-style-type: none;
}
#txt_lbl
{
margin: 30px 30px 0 0;
}
#txt_lbl #Name
{
margin-right: 55px;
}
#txt_lbl #Family
{
margin-right: 4px;
}
#txt_lbl #User
{
margin-right: 12px;
}
#txt_lbl #Pass
{
margin-right: 16px;
}
#txt_lbl input
{
padding: 0 5px;
border: 1px solid #000;
width:200px;
height: 25px;
}
#txt_lbl li
{
margin-bottom: 10px;
}
#btn
{
margin: 20px 0;
text-align: center;
}
#btn input
{
margin-right: 30px;
width: 250px;
height: 28px;
background-color: #090;
border: 1px solid #999;
font-size: 13px;
font-weight: bold;
color: #444;
}
#btn input:hover
{
cursor: pointer;
color: #000;
font-size: 14px;
box-shadow: 0 0 11px #666;
-moz-box-shadow: 0 0 11px #666;
-webkit-box-shadow: 0 0 11px #666;
-ms-box-shadow: 0 0 11px #666;
-o-box-shadow: 0 0 11px #666;
}
#Error1, #Error2, #OK
{
margin: 10px 20px;
}
#Error1, #Error2
{
color: #930e00;
}
#OK
{
color: #286b00;
}
</style>
</head>
<body>
<form action="check.php" method="post" name="frm_reg" id="frm_reg"> <!--check.php-->
<div id="register">
<div id="Error1">رمز عبور فقط میتوند شامل حروف یزرگ و کوچک و اعداد باشد</div>
<div id="Error2">تعداد کاراکتر رمز عبور باید بین 6 تا 16 کاراکتر باشد</div>
<div id="OK">ثبت نام انجام شد</div>
<ul id="txt_lbl">
<li>
<label>نام : </label>
<input id="Name" name="Name" type="text" /><br />
</li>
<li>
<label>نام خانوادگی : </label>
<input id="Family" name="Family" type="text" />
</li>
<li>
<label>نام کاربری : </label>
<input id="User" name="User" type="text" />
</li>
<li>
<label>رمز عبور : </label>
<input id="Pass" name="Pass" type="text" />
</li>
</ul>
<ul id="btn">
<li>
<input id="btn_reg" name="btn_reg" type="submit" value="ثبت نام" />
</li>
</ul>
</div>
</form>
</body>
</html>
کد Check.php :
<?php
if(!isset($_POST["Pass"]))
{
echo "value is empty";
return;
}
else
{
$pass = $_POST["Pass"];
}
$chrList = '/\A[a-zA-Z0-9]+\z/';
if(preg_match($chrList, $pass))
{
echo json_encode(true);
}
else
{
echo json_encode(false);
}
کدی که چک میکنه رمز عبور باید بین 6 تا 16 کاراکتر باشه، توی فایل register.php نوشته شده (خط 18)
کدی که چک میکنه رمز عبور فقط باید از حروف یزرگ و کوچیک و عدد تشکیل بشه، توی فایل check.php نوشته شده .
این فایل رو هم دانلود کنید و بزارید توی فولدری که این دو فایل قرار دارن . (فایل JQuery)
خروجی :
شما مي توني بري regular expression رو مطالعع كني با اين ابزار ميتوني به راحتي پيادش كني و هر شرطي كه مي خواي بزاري
من با استفاده از JQuery کد براتون نوشتم (JQuery یه کتابخانه جاوااسکریپت هست که کد نویسی رو راحت تر میکنه) با JQuery خیلی راحتر کد نویسی انجام میدید .
در ابتدای واسه اینکه بتونیم شروع به کدنویسی JQuery کنیم باید فایل JQuery دانلود کنیم که من آپلودش کردم (لینکشو گذاشتم توی پاسخ قبلی) میتونید خودتونم از سایت JQuery این فایل دانلود کنید فرقی نمیکنه .
()function)$ در ابتدای شروع کدنویسی Jquery میاریم و بعد شروع به کد نویسی میکنیم .
با استفاده از کد زیر میگیم که تگی که id یش برابر Error1 هست رو مخفی کنه . (محتواش این تگ یه پیغام خطا هست که توی کد معلومه، و چون نمیخوایم زمانی که صفحه لود میشه ای تگ (یا به عبارتی این پیغام خطا) نمایش داده بشه این تگ مخفی میکنیم و زمانی که یوزر رمزعبوری وارد کنه که حروفش به غیر از حروف بزرگ و کوچیک و عدد هست نمایش داده میشه)
$('#Error1').hide();
با استفاده از کد زیر تعداد کاراکترهای محتوی تگ با id بنام Pass بدست میاریم .
$("#Pass").val().length
تشریح کد زیر :
با استفاده از متود Post محتوای رمزعبور رو به فایل check.php میفرستیم و با استفاده از Json توی php نتیجه (یا true یا false) رو برمیگردونیم که نتیجه توی data$ ریخته میشه و data$ چک میکنیم اگه true باشه یعنی شرایط پسورد (فقط حروف بزرگ و کوچیک و عدد) درست هست و پیغام "ثبت نام انجام شد" به ما نمایش داده میشه وگرنه پیغام خطا به ما نمایش داده میشه .
$.post("Check.php",
{
Pass : $("#Pass").val()
}, function(data)
{
if(data == false)
{
$('#Error2').hide();
$('#OK').hide();
$('#Error1').show();
}
else
{
$('#Error2').hide();
$('#Error1').hide();
$('#OK').show();
}
}, 'json');
تشریح کد زیر :
<?php
if(!isset($_POST["Pass"]))
{
echo "value is empty";
return;
}
else
{
$pass = $_POST["Pass"];
}
$chrList = '/\A[a-zA-Z0-9]+\z/';
if(preg_match($chrList, $pass))
{
echo json_encode(true);
}
else
{
echo json_encode(false);
}
خط 3 تا 11 چک میکنه که اگه مقداری (یعنی همون رمزعبور) به این فایل ارسال نشده باشه یه پیغام خطا بده وگرنه مقدارشو بریزه توی متغیری به نام pass$ ، سپس یه متغیر بنام chrList$ تعریف میکنیم و شرایط پسورد توش میزاریم (فقط 0 تا 9، a تا z و A تا Z)
و بعدش با استفاده از تابع preg_match کاراکترهای رمزعبور (که توی متغیر pass دخیره شده) رو با این لیست چک میکنیم و اگه کاراکترهای رمزعبور غیر از لیست بود با تابع json مقدار false برگشت داده میشه در غیر این صورت مقدار true برمیگردونه که یعنی رمز عبور با شرایط یکسان هست .
سلام واقعا ممنونم از پاسخ شما
من تازه کارم و زیاد با پی اچ پی سرو کا نداشتم کدی ک من نوشتم کاملا اشتباه :
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9a-zA-Z]+$/ ;
if(elem ==/^[0-9]+$/ && elem ==/^[a-z]+$/ && elem ==/^[A-Z]+$/){
function lengthRestriction(elem,min,max){
var uInput = elem.value;
if (uInput.length >= min && uInput.length <= max ){
return true;
}
}
}else{
alert("Please enter between " +min+ " and " +max+ " characters");
elem.focus();
return false;
}
}
در واقع همین قدر بلدم از جاوا ساده تر از این نمیشه نوشت ؟ و این ک $(function() این رو برای استفاده از چند فانکشن به کار میبرن ؟؟؟