جلوگیری از وارد کردن کاراکترها غیر مجاز در فیلد با jQuery

با جلوگیری از وارد کردن کاراکترها غیر مجاز در فیلد input , می توانید در مرحله اول, خطاهای اعتبارسنجی را به حداقل برسانید. پس بیایید یک مثال از نحوه انجام این کار را با جی کوئری ببینم.

در این مثال از آموزش jQuery , ما دو فیلد نام و شماره تلفن را در فرم HTML داریم. در فیلم نام, ما فقط می توانیم حروف الفبای انگلیسی را وارد کنیم و در بخش شماره تلفن, نیز فقط مجاز به وارد کردن اعداد هستیم.

این محدود سازی می تواند با فراخوانی تابع jQuery با رویداد keypress بر روی فیلد فرم ها انجام شود.

فرم HTML فیلد های محدود شده

کد HTML زیر شامل یک فرم با فیلد های نام و شماره تماس است که هر کدام محدود به وارد کردن داده های معتبر از نظر برنامه ما هستند.

<form id="frm" method="post">
   <div class="input-group">Name <span class="name-validation validation-error"></span></div>
   <div>
        <input type="text" name="name" id="name" class="input-control" onblur="validate()" />
   </div>
    
   <div class="input-group">Phone <span class="phone-validation validation-error"></span></div>
   <div>
		<input type="text" name="phone" id="phone" class="input-control" onblur="validate()" />
   </div>

   <div>
        <button type="submit" name="btn-submit" id="btn-submit" disabled="disabled">Submit</button>
    </div>
</form>

<div>

</div>

<div class="input-group">Phone <span class="phone-validation validation-error"></span></div>

<div>

</div>

<div>

<button type="submit" name="btn-submit" id="btn-submit" disabled="disabled">Submit</button>

</div>

</form>

مدیریت رویداد onKeyPress برا محدود کردن داده های کاربر

برای جلوگیری از وارد کردن کاراکترها غیر مجاز در فیلد با jQuery از اسکریپت زیر استفاده می کنیم.

کد jQuery زیر با انجام رویداد key-press (فشردن دکمه کیبورد) بر روی فیلد های ورودی اجرا می شود. زمانی که مقداری در فیلد نام را وارد می کنیم, این تابع با چک کردن مقدار کد اسکی (ASCII) , فقط اجازه به ورود حرف لاتین را می دهد.

$(document).ready(function() {
	$('#name').on('keypress', function(key) {
		if((key.charCode < 97 || key.charCode > 122) && (key.charCode < 65 || key.charCode > 90) && (key.charCode != 45)) {
			return false;	
		}
	});
	$('#phone').on('keypress', function(key) {
        if(key.charCode < 48 || key.charCode > 57) {
			return false;
		}
    });
});

$(document).ready(function() {

$('#name').on('keypress', function(key) {

if((key.charCode < 97 || key.charCode > 122) && (key.charCode < 65 || key.charCode > 90) && (key.charCode != 45)) {

return false;

}

});

$('#phone').on('keypress', function(key) {

if(key.charCode < 48 || key.charCode > 57) {

return false;

}

});

برای تست آنلاین charcode ها می توانید به این وبسایت مراجعه کنید : http://keycode.info

همچنین لیست کامل charcode ها می توانید از این سایت استفاده کنید :

https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

اگر نیاز به اعتبارسنجی این مورد با کارکترهای فارسی را دارید بهتر است از regex برای اعتبارسنجی در جاواسکریپت بهره ببرید و یا شرط را با یک ! معکوس کنید.

امیدوارم از آموزش جلوگیری از وارد کردن کاراکترها غیر مجاز در فیلد با jQuery نهایت استفاده را برده باشید .

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.