基于jquery实现即时检查格式是否正确的表单

前端技术 2023/09/01 JavaScript

现在很多网站的注册模块都可以实现即时检查格式是否正确，这样极大的增强了用户体验，对开发非常有利。

下面的代码是利用jquery实现了对一个表单字段格式的即时检查（包括字段长度、邮箱格式），同时在提交时，再次出发检查事件。

注意这个检查是keyup和focus上为主，利用这两个事件来触发blur（失去焦点）事件。

<html>
<head>
 <meta charset=\"utf-8\" />
 <title></title>
 <link href=\"css/style.css\" rel=\"stylesheet\" type=\"text/css\" />
 <script src=\"jquery-1.3.2.min.js\"></script>
 <script>
  $(function () {
　　　　　　　　//为每个必填字段后面加上*
   $(\"form :input.required\").each(function () {
    var $required = $(\"<strong class=\'high\'>*</strong>\");
    $(this).parent().append($required);
   });
　　　　　　　　//textbox失去焦点事件
   $(\"form :input\").blur(function () {
    var $parent = $(this).parent();
    $parent.find(\".formtips\").remove();
    if ($(this).is(\'#username\')) {
     if (this.value == \"\" || this.value.length < 6) {
      var errorMsg = \"请输入至少6位的用户名\";
      $parent.append(\'<span class=\"formtips onError\">\' + errorMsg + \"</span>\");
     } else {
      var okMsg = \"输入正确\"
      $parent.append(\'<span class=\"formtips onSuccess\">\' + okMsg + \'</span>\');
     }
    }
    if ($(this).is(\'#email\')) {
     if (this.value == \"\" || (this.value != \"\" && !/.+@.+\\.[a-zA-Z]{2,4}$/.test(this.value))) {
      var errorMsg = \"请输入正确的E-Mail地址\";
      $parent.append(\'<span class=\"formtips onError\">\' + errorMsg + \"</span>\");
     } else {
      var okMsg = \"输入正确\"
      $parent.append(\'<span class=\"formtips onSuccess\">\' + okMsg + \'</span>\');
     }
    }
   }).keyup(function () {
    $(this).triggerHandler(\"blur\");//keyup和focus利用triggerHandler来触发blur事件
   }).focus(function () {
    $(this).triggerHandler(\"blur\");
   });
   $(\"#send\").click(function () {//提交按钮事件
    $(\"form .required:input\").trigger(\'blur\');
    var numError = $(\'form .onError\').length;
    if(numError)
    {
     return false;
    }
    alert(\"注册成功，密码已发到你的邮箱，请查收\");
   });
  });

 </script>
</head>
<body>
 <form method=\"post\" action=\"\">
  <div class=\"int\">
   <label for=\"username\">用户名</label>
   <input type=\"text\" id=\"username\" class=\"required\" />
  </div>
  <div class=\"int\">
   <label for=\"email\">邮箱</label>
   <input type=\"text\" id=\"email\" class=\"required\" />
  </div>
  <div class=\"int\">
   <label for=\"=personinfo\">个人资料</label>
   <input type=\"text\" id=\"personinfo\" />
  </div>
  <div class=\"sub\">
   <input type=\"submit\" value=\"提交\" id=\"send\" />
   <input type=\"reset\" id=\"res\" />
  </div>
 </form>
</body>
</html>

更多内容点击：jquery表单验证大全

以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/1885

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案