JQuery在一个简单的表单验证的例子

zoukankan html css js c++ java

JQuery在一个简单的表单验证的例子

html代码例如以下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <link href="css/style.css" rel="stylesheet" type="text/css" />
  
  <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  <script type="text/javascript">
     //<![CDATA[
     $(function(){
        //假设是必填的，则加红星标识
        $("form :input.required").each(function(){
           var $required = $("<strong class='high'> *</strong>"); //创建元素
           $(this).parent().append($required); //然后将它追加到文档中
        });
        //文本框失去焦点后
        $('form :input').blur(function(){
           var $parent = $(this).parent();
           $parent.find(".formtips").remove();
           //验证username
           if($(this).is('#username')){
             if(this.value=="" || this.value.length < 6){
                var errorMsg = '请输入至少6位的username.';
                $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");
      }).focus(function(){
          $(this).triggerHandler("blur");
   });//end blur


  //提交，终于验证
  $('#send').click(function(){
    $("form :input.required").trigger('blur');
    var numError = $('form .onError').length;
    if(numError){
       return false;
    }
    alert("注冊成功,password已发到你的邮箱,请查收.");
   });

  //重置
  $('#res').click(function(){
     $(".formtips").remove();
  });
})
//]]>
</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>

版权声明：本文博客原创文章。博客，未经同意，不得转载。

查看全文

相关阅读:
【Codeforces 1172F】—Nauuo and Bug（线段树+双指针）
【Codeforces 1172F】—Nauuo and Bug（线段树+双指针）
【BZOJ4671】—异或图（斯特林反演+线性基）
【BZOJ4671】—异或图（斯特林反演+线性基）
【Codeforces #453 E】—Little Pony and Lord Tirek（线段树/均摊分析）
【Codeforces #453 E】—Little Pony and Lord Tirek（线段树/均摊分析）
【Codeforces 480E】—Parking Lot（线段树+单调队列）
【Codeforces 480E】—Parking Lot（线段树+单调队列）
web安全
 Jodd——java瑞士军刀

原文地址：https://www.cnblogs.com/gcczhongduan/p/4730028.html