Fork me on GitHub

jQuery的表单验证

jQuery的表单验证

武汉PHP_表单验证
直接上代码

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8" />
    5. <title></title>
    6. </head>
    7. <body>
    8. <form method="post" action="">
    9. <div class="int">
    10. <label for="username">用户名:</label>
    11. <input type="text" id="username" class="required" />
    12. </div>
    13. <div class="int">
    14. <label for="email">邮箱:</label>
    15. <input type="text" id="email" class="required" />
    16. </div>
    17. <div class="int">
    18. <label for="personinfo">个人资料:</label>
    19. <input type="text" id="personinfo" />
    20. </div>
    21. <div class="sub">
    22. <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
    23. </div>
    24. </form>
    26. <!-- 引入jQuery -->
    27. <script src="jquery.js" type="text/javascript"></script>
    28. <script type="text/javascript">
    29. $(function(){
    30. //如果是必填的，则加红星标识.
    31. $("form :input.required").each(function(){
    32. var $required = $("<strong class='high'> *</strong>"); //创建元素
    33. $(this).parent().append($required); //然后将它追加到文档中
    34. });
    35. //文本框失去焦点后
    36. $('form :input').blur(function(){
    37. var $parent = $(this).parent();
    38. $parent.find(".formtips").remove();
    39. //验证用户名
    40. if( $(this).is('#username') ){
    41. if( this.value=="" || this.value.length < 6 ){
    42. var errorMsg = '请输入至少6位的用户名.';
    43. $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
    44. }else{
    45. var okMsg = '输入正确.';
    46. $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
    47. }
    48. }
    49. //验证邮件
    50. if( $(this).is('#email') ){
    51. if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
    52. var errorMsg = '请输入正确的E-Mail地址.';
    53. $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
    54. }else{
    55. var okMsg = '输入正确.';
    56. $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
    57. }
    58. }
    59. });
    61. //提交，最终验证。
    62. $('#send').click(function(){
    63. $("form :input.required").trigger('blur');
    64. var numError = $('form .onError').length;
    65. if(numError){
    66. return false;
    67. }
    68. alert("注册成功,密码已发到你的邮箱,请查收.");
    69. });
    71. //重置
    72. $('#res').click(function(){
    73. $(".formtips").remove();
    74. });
    75. });
    76. </script>
    77. </body>
    78. </html>
posted @ 2018-10-25 14:13  big2cat  阅读(288)  评论(0)  编辑  收藏  举报