Jquery是一款廣泛使用的JavaScript庫,具有快速、簡潔和適應性強的優點,在Web開發中發揮著重要的作用。它的驗證機制可以讓我們更輕松地驗證表單輸入的內容是否符合預期。下面,我們演示如何使用jquery驗證11位數字。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>驗證11位數字</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style> #number{ border: 1px solid gray; width: 200px; height: 30px; font-size: 16px; padding-left: 5px; } </style> </head> <body> <form action="#" method="post"> <p>請輸入11位數字:</p> <input type="text" id="number" name="number"> <input type="submit" value="提交"> </form> <script> $(document).ready(function(){ $("#number").blur(function(){ var value=$(this).val(); if(/^[0-9]{11}$/.test(value)){ alert("驗證通過"); }else{ alert("請輸入11位數字"); } }); }); </script> </body> </html>
以上代碼中,我們在html中添加了一個表單,其中包含一個輸入框、一個提交按鈕,同時在p標簽中提醒用戶輸入11位數字。通過jquery的blur()方法,在輸入途中將觸發驗證事件,驗證是否輸入11位數字。如果驗證成功,彈出"驗證通過",否則彈出"請輸入11位數字"。
當然這種驗證還可以根據需要,添加多種驗證方式,如密碼強度驗證、郵箱驗證、電話號碼驗證等??傊?,使用jquery庫可以讓我們更輕松地實現表單驗證,提高用戶體驗。
上一篇html特殊顏色代碼
下一篇css 先加載默認圖片