表單校驗外掛validate
阿新 • • 發佈:2018-12-22
相信大家都在學習java的過程的學習了很多的表單校驗,可以用html,js,jquery等等,都能實現表單驗證的功能,但是使用起來不夠靈活,操作起來也很麻煩,今天我給大家介紹一種前端的表單校驗的一個外掛validate。
然就就可以開始寫程式碼了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <!-- 引入表單校驗外掛 --> <script type="text/javascript" src="js/jquery.validate.min.js"></script> <script type="text/javascript"> $(function(){ $("#myform").validate({ rules:{ "nikename":{ "required":true }, "username":{ "required":true, }, "password":{ "required":true, "rangelength":[6,12] }, "repassword":{ "required":true, "rangelength":[6,12], "equalTo":"#password" } }, messages:{ "nikename":{ "required":"暱稱不能為空" }, "username":{ "required":"使用者名稱不能為空", }, "password":{ "required":"密碼不能為空", "rangelength":"密碼長度6-12位" }, "repassword":{ "required":"密碼不能為空", "rangelength":"密碼長度6-12位", "equalTo":"兩次輸入密碼不一致" } } }); }); </script> <body> <form action="#" method="post" id="myform"> nikename:<input type="text" name="nikename" id="nikename" /></br> username:<input type="text" name="username" id="username" /></br> password:<input type="text" name="password" id="password" /></br> repassword<input type="text" name="repassword" id="repassword" /></br> <input type="submit" value="註冊" /> </form> </body> </html>