تحقق النموذج في جافا سكريبت

يمكن إكمال تحقق نموذج HTML عبر JavaScript.

يستخدم نموذج HTML عادة لجمع معلومات المستخدم، مثل الاسم، عنوان البريد الإلكتروني، الموقع، العمر وما إلى ذلك.

لكن من المحتمل أن بعض المستخدمين قد لا يدخلون البيانات التي تتوقعها.

للحد من الضغط غير الضروري على موارد الخادم، يمكنك استخدام JavaScript للتحقق من بيانات النموذج على الجانب العميل (نظام المستخدم)

يتم تنفيذها بواسطة متصفح الويب قبل إرسال الإدخال إلى خادم الويبالتحقق على الجانب العميل。

بعد إرسال الإدخال إلى الخادم،التحقق على الجانب الخادميتم تنفيذها بواسطة خادم الويب。

　　<div　class="wrapper">
　　　　<h2>إنشاء حساب</h2>
　　　　<label for="username"><b>الاسم</b></label>
　　　　<input type="text" placeholder="ادخل اسم المستخدم" name="uname" id="username" required>
　　　　<label for="useremail"><b>البريد الإلكتروني</b></label>
　　　　<input type="email" placeholder="ادخل البريد الإلكتروني" name="uemail" id="useremail" required>
　　　　<label for="userpwd1"><b>كلمة المرور</b></label>
　　　　<input type="password" placeholder="ادخل كلمة المرور" name="psw" id="userpwd1" required>
　　　　<input type="password" placeholder="تأكيد كلمة المرور" name="cpsw" id="userpwd2" required>
　　　　<p style="margin-top: 10px;">
　　　　　　　<input type="radio" name="gender" id="female" value="female" checked><label for="female">أنثى</label>
　　　　　　　<input type="radio" name="gender" id="male" value="male"><label for="male">ذكر</label>
　　　　</p>
　　　　<button type="submit">تسجيل
　　</div>
　　<div class="footer">
　　　　<div>هل لديك حساب؟ <a href="#">تسجيل الدخول</a></div>
　　</div>
</form>
<script>
function validateForm() {
　　let name = document.getElementById("username").value;
　　let email = document.getElementById("useremail").value;
　　let pswd1 = document.getElementById("userpwd1").value;
　　let pswd2 = document.getElementById("userpwd2").value;
　　
　　if (name == "") {
　　　　alert("يجب ملء الاسم");
　　　　return false;
　　}
　　if (email == "") {
　　　　alert("يجب ملء البريد الإلكتروني");
　　　　return false;
　　}
　　if (pswd1 !== "" || pswd2 !== "") {
　　　　if (pswd1 !== pswd2) {
　　　　　　alert("لم تكن كلمة المرور متطابقة");
　　　　　　return false;　　　　　　
　　　　}
　　}
　　　　alert("يجب ملء كلمة المرور");
　　　　return false;　　
　　}
　　return true;
}
</script>

مهمة التحقق الشائعة هي:

• هل قام المستخدم بملء جميع الحقول المطلوبة؟

• هل أدخل المستخدم بيانات صحيحة؟

في هذا الكود، إذا كان حقل الإدخال (اسم المستخدم) فارغًا، فإن هذه الوظيفة ستعطي رسالة تحذير وتعيد false لمنع تقديم النموذج:

　　function validateForm() {
　　let x = document.getElementById("uname").value;
　　if (x == "") {
　　　　alert("يجب ملء الاسم");
　　　　return false;
　　}
　　}

يمكنك استدعاء هذه الوظيفة عند تقديم النموذج:

<form action="form-action.html" onsubmit="return validateForm()" method="POST">
　　<label for="uname">Name:</label>
　　<input type="text" name="username" id="uname">
　　<input type="submit" value="Submit">
</form>

تحقق من إدخال الرقم

JavaScript غالبًا ما يستخدم لتحقق من إدخال الرقم.

أدخل رقم بين 1 و 10:

تحقق من إدخال عنوان البريد الإلكتروني

JavaScript غالبًا ما يستخدم لتحقق من عنوان البريد الإلكتروني.

أدخل عنوان البريد الإلكتروني صحيحًا:

تحقق من تأكيد كلمة المرور

JavaScript غالبًا ما يستخدم لتطابق تأكيد كلمة المرور.

تحقق تلقائي من النموذج HTML

يمكن استخدام التحقق من صحة النموذج HTMLمطلوبتنفيذ الخاصية تلقائيًا：

<input type="text" name="demo" required>

تغيير نوع المدخل

يمكنك استخدام JavaScript لتغيير بين <input type="password"> و<input type="text">.

أدخل قيمة في حقل كلمة المرور، ثم انقر على زر "أظهر كلمة المرور".

خصائص التحقق من المدخل لـHTML5

أدخل HTML5 خصائص HTML الجديدة التالية:

مخترات CSS المزيفة للتحقق من CSS

أدخل CSS3 مخترات CSS المزيفة الجديدة التالية:

ملاحظة:التأكد من أن التحقق على المستوى العملاء لا يمكن أن يحل محل أو يحل محل التحقق على المستوى الخادم. حتى لو تم التحقق من بيانات النموذج من قبل المستخدم، يجب دائمًا التحقق من بيانات النموذج على المستوى الخادم، لأن المستخدم يمكن أن يوقف JavaScript في متصفحه.