كيف انشاء نموذج بسيط مع التحقق من صحة البيانات validation باستخدام jquery

اليوم نحن بصدد لمناقشة حول التحقق من صحة النموذج. الآن أيام الناس يتوقعون التحقق من صحة قوية مع رمز بسيط، لذلك HTML5 هناك، في HTML5 لدينا لمجرد وضع المطلوبة لجعل التحقق من صحة، وعلى غرار هذا القبيل، ونحن نذهب لرؤية حول التحقق من صحة النموذج باستخدام التحقق من صحة شبيبة. باستخدام أن شبيبة التحقق من صحة نحن بصدد القيام به التحقق من صحة بسيط جدا. وكذلك التحقق من صحة جافا سكريبت سيستغرق الكثير من التعليمات البرمجية بحيث يكون لدينا للتغلب على ذلك من خلال التحقق من صحة مسج. تشمل فقط التحقق من صحة ملف مسج لجعل التحقق من صحة النموذج. دعونا نرى الترميز.

HTML


<html>

    <head>

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>


    <script type="text/javascript">

      $('#user_form').validate();

    </script>

    </head>

    <body>

        <form  id="user_form" method="post">

        <p>

            <input type="text" title="Please Enter your name" class="required" name="firstname" />

        </p>

        <p>

            <input type="text" class="required" name="lastname" />

        </p>

        <p>

            <input type="email" class="required" name="email" />

        </p>    

        <p>

            <input type="submit" name="send" value="Submit your Request">

        </p>

        </form>

    </body>

</html>

مطلوب التحقق من صحة الحقل

مجرد دعوة مطلوب فئة في حقل الإدخال وأدخل رسالة اللقب.

<input type="text" title="Please Enter your name" class="required" name="firstname" />

التحقق من صحة حقل البريد الإلكتروني

<input type="email" class="required email" name="email" />

التحقق من صحة الرقم

<input type="text" class="required number" name="phone" />

التحقق من صحة عنوان URL

<input type="text" class="required url" value="http://" name="url" />

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




<input type="password" id="password" class="required" name="password" />



<input type="text" equalto="#password" class="required" name="password1" />

الحد الأدنى والحد الأقصى



<input type="text" min="10" class="required number" name="age" />


<input type="text" max="60" class="required number" name="age" />

حقول النموذج أخرى



<input type="checkbox" class="required" name="agree" /> agree


<input type="radio" class="required" name="yes" /> yes

<select class="required"></select>

<textarea class="required"></textarea>