AngularJs表单验证+仿某Q注册界面

近两天自学了一下AngularJS ，今天写了一个表单验证，然后觉得太单调，就去网上看了比较好看的注册网，最后决定模仿了一下某Q的界面。

下面贴出代码：
图片显示区，用了一款jquery的插件，图片轮播方式为淡入

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
   
    <script  src="js/jquery-1.10.2.js"></script>
    <script  src="js/jquery.orbit-1.3.0.js"></script>
    
   
    <link rel="stylesheet" type="text/css" href="css/orbit-1.3.0.css">

    <title></title>
    <script type="text/javascript">
            $(function () {
                $('#featured').orbit({
                	animation: 'fade',
                });
            });
        </script>
</head>
<body>
<div class="container">
                  <div id="featured">
                      <img src="img/no1.jpg" data-caption="#htmlCaption1"  />
                      <img src="img/no2.jpg" data-caption="#htmlCaption2" />
                      <img src="img/no3.jpg" data-caption="#htmlCaption3" />
                  </div>

                  <!-- Captions for Orbit -->
                  <span class="orbit-caption" id="htmlCaption1"><strong>1</strong></span>
                  <span class="orbit-caption" id="htmlCaption2"><strong>2</strong></span>
                  <span class="orbit-caption" id="htmlCaption3"><strong>3</strong></span>
              </div>
</body>
</html>

表单区
用的AngularJS 验证

<!DOCTYPE html>
<html ng-app="">
  <head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
   
    <script  src="js/angular.min.js" ></script>
    <script  src="js/jquery-1.10.2.js"></script>
    <script  src="js/jquery.orbit-1.3.0.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">
    <link rel="stylesheet" type="text/css" href="css/register.css">
    <link rel="stylesheet" type="text/css" href="css/orbit-1.3.0.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <title></title>
     
     
  </head>
  <body >
    
        <div class="top">
        <a href="#" style="background: #005FEB;border-radius:25px;color: #FFFFFF;padding-right: 15px;"><span class="xx">xx</span>靓号</a> 
        <a href="#">邮箱账号</a> 
        <a href="#">简体中文</a> 
        <a href="#">意见反馈</a> 
        </div>
        
        <div class="fonttitle">
            <p class="welcome">欢迎注册xx</p>
             <p class="day" style="margin-top: 40px;">每一天，不悠闲 <span class="dayVip"><a href="#">免费靓号</a</span></p> 
        </div>
        
 
    <div class="posimg">
         <div class="imgss">
            <img src="img/logo.png" alt="">
        </div>
    </div>
   
  <div class="formtitle">
      <form class="form-horizontal" novalidate name="login">
    <fieldset>
     
    
    <div class="control-group">

          <!-- Text input-->
          
          <div class="controls">
            <input type="text" name="username" placeholder="用户名" class="input-xlarge" id="username" ng-model="user"  required ng-focus>
              <span ng-show="login.username.$error.required" style="color: red ">*</span>
              <span ng-show="login.username.$dirty && myFrom.myadrees.$invalid"></span>
          
          </div>
        </div>

    <div class="control-group">

          <!-- Text input-->
         <div class="controls">
            <input type="password" name="password" placeholder="密码"  class="input-xlarge" id="password" maxlength="15" minlength="5" ng-model="pwd"  required ng-focus>
             <span ng-show="login.password.$dirty && myFrom.myadrees.$invalid"></span>
             <span ng-show="login.password.$error.required" style="color: red ">*</span>
            <span ng-show="login.password.$error.minlength<8|| maxlength>16" style="color: red;font-size: 12px;  ">长度为8-16个字符</span><br>
          </div>
        </div>


        <div class="control-group" id="tel">
          <!-- Select Basic -->
          <div class="controls" >
               <select class="input-xlarge" >
                
                  <option >+86</option>
                 <option>台湾+886</option>
              </select>
                <input type="text" placeholder="电话号码" class="input-xlarge" id="tel" name="tel" ng-pattern="/^1[3|4|5|7|8]\d{9}$/" ng-model="ut" required>
             <span ng-show="login.tel.$dirty && myFrom.myadrees.$invalid"></span>
             <span ng-show="login.tel.$error.required" style="color: red">*</span>
             <span ng-show="login.tel.$error.pattern" style="color: red;font-size: 12px; ">手机格式不正确</span>
              <p class="help-block"  style="color: #aaa;line-height: 30px;">可通过该手机号找回密码</p>
          </div>
              
        </div>

        <div class="control-group">
         
          <!-- Button -->
          <div class="controls">
            <button class="btn btn-primary" ng-disabled="login.$invalid" id="buttonstyle">立即注册</button>
          </div>
        </div>

        <div class="control-group">
          <div class="controls">

            <!-- Multiple Checkboxes -->
            <label class="checkbox" >
              <input type="checkbox"      style="margin-top: 8px;" name="check" ng-model="checks" required>
              <span style="color: #aaa;line-height: 30px;">同时开通xx空间</span>
              
    
             
            </label>
            <label class="checkbox">
              <input type="checkbox"    style="margin-top: 8px;" name="check" ng-model="checkt" required>
              <span style="color: #aaa;line-height: 30px;">我已阅读并同意相关服务条款和隐私政策</span> 
                  
            </label>

    

     </fieldset>
    </form>
  </div>
    
    
  
  
   
</body>
</html>

index 将两个文件合并

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
	<frameset cols="40%,60%"  frameborder="0"  allowtransparency="ture">
  		<frame src="img.html" scrolling="no"/>
  		<frame src="login.html" scrolling-x="no" />
	</frameset>
<body>
	
</body>
</html>

要源代码和组件包的话可关注我的微博  如果文件分享日期生效 、找不到分享链接， 对Java 有共同兴趣的都可以随时私信我