اعتبار سنجی کد پستی در جاوا اسکریپت

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

با سلام و خسته نباشید خدمت دوستان عزیزم؛ همونطور که در خلاصه مبحث ما مطالعه کردین امروز میخواهیم کد پستی دریافت شده از کاربر را سمت کاربر اعتبار سنجی کنیم تا اینطوری فشار ارسال اطلاعات بی ارزش رو سمت سرور کم کنیم.

در ابتدا به معرفی کلی ساختار کدپستی و  سپس به  پیاده سازی اعتبار سنجی اون سمت کاربر به کمک دستورات جاوا اسکریپت می پردازیم، با ما همراه باشین…

ابتدا یک سند html تعریف می کنیم و کد های زیر رو داخل یک form قرار میدیم:

<div class="form-group col-xs-6">
<label>کد پستی</label>
<input type="text" maxlength="10" class="form-control" name="post_code" id="post_code" onchange="check_postcode()" placeholder="کد پستی" value="<?php echo $post_code; ?>" required="" />
<div id="postcode_err" style="color: red; display: none;">کد پستی 10 رقمی را درست وارد کنید</div>
</div>

در پایان سند هم کدهای جاوا اسکریپت زیر رو قرار میدیم:

عملکرد این کدها به این صورته که اگه کد پستی اشتباه وارد بشه به کاربر اخطار میده

function check_postcode() {
var p = document.getElementById("post_code").value;
var pattern = /(?<!\d)\d{10}(?!\d);
if (pattern.test(p) === false) {
document.getElementById("post_code").style = "border-color: #ff0000";
document.getElementById("postcode_err").style.display = "block";
document.getElementById("postcode_err").innerHTML = "کد پستی 10 رقمی را درست وارد کنید";
} else {
document.getElementById("post_code").style = "border-color: #d2d6de";
document.getElementById("postcode_err").style.display = "none";
}