用户注册



邮箱：

密码：

用户登录


邮箱：

密码：
记住登录一个月忘记密码？

发表随想


还能输入：200字
云代码 - javascript代码库

jquery 表单输入框验证 （用户名和邮箱）

2013-03-17 作者： 小蜜锋举报

[javascript]代码库

view sourceprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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();
                         //验证用户名
                         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>');
                                }
                         }
                });
 
                //提交，最终验证。
                 $('#send').click(function(){
                                $("form :input.required").trigger('blur');
                                var numError = $('form .onError').length;
                                if(numError){
                                        return false;
                                }
                                alert("注册成功,密码已发到你的邮箱,请查收.");
                 });
 
                //重置
                 $('#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>

[代码运行效果截图]


jquery 表单输入框验证 （用户名和邮箱）


网友评论    (发表评论)

共2 条评论 1/1页

发表评论：

评论须知：

  • 1、评论每次加2分，每天上限为30；
  • 2、请文明用语，共同创建干净的技术交流环境；
  • 3、若被发现提交非法信息，评论将会被删除，并且给予扣分处理，严重者给予封号处理；
  • 4、请勿发布广告信息或其他无关评论，否则将会删除评论并扣分，严重者给予封号处理。


扫码下载

加载中，请稍后...

输入口令后可复制整站源码

加载中，请稍后...