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" />

  <!-- 引入jQuery -->

  <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>

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

最新文章

  1. Allocators与Criterion的相同点及区别
  2. python核心编程学习记录之面向对象编程
  3. valueForKeyPath的妙用(转)
  4. nginx rewrite 参数和例子
  5. asp.net下利用MVC模式实现Extjs表格增删改查
  6. 关闭chrome浏览器的developer tools
  7. ES6这些就够了
  8. Python：序列的增量赋值
  9. [BJOI2019]勘破神机
  10. ConcurrentHashMap实现原理
  11. 【转载】在MySQL登录时出现Access denied for user &#39;root&#39;@&#39;localhost&#39; (using password: YES) 拒绝访问，并可修改MySQL密码
  12. 伪GZCC官网
  13. 用代码生成UINavigationController 与UITabBarController相结合的简单QQ框架（部分）
  14. session和cookies
  15. ask 调用时间标签
  16. 0ra-12170 tns 连接超时
  17. SpringMVC和Freemarker整合,带自定义标签的使用方法
  18. dubbo学习总结三 消费端
  19. iOS端App的icon和Launch Image规格实时更新
  20. 线程池 Future 带返回结果

热门文章

  1. [Scss Flex] Reuse Flexbox Styles With A Sass Mixin
  2. 【Python排序搜索基本算法】之拓扑排序
  3. 分层抽样（Stratified sampling）
  4. AHB接口转APB
  5. Facebook Hacker Cup 2015 Round 1--Winning at Sports（动态规划）
  6. 定位导致物化视图无法快速刷新的原因 分类： H2_ORACLE 2013-08-08 23:04 335人阅读 评论(0) 收藏
  7. Codeforces Round #315 (Div. 2)——C. Primes or Palindromes?
  8. JAVA生成二维码并转化为二进制在页面展示
  9. 浅谈python字符串存储形式
  10. SQLServer重建索引