www-huanghe/modules/register/views/register.html

<ion-view>
  <div class="bar bar-header bar-header-blue">
    <div class="button button-icon icon  pus_blue" ng-click="goback()"></div>
    <button class="button button-icon  icon goback whiteGoBack noneContent" ng-click="goback()"></button>
    <h1 ng-if="defaultLan == 'Chinese'" class="bar_title" style="color: #fff">注册</h1>
    <h1 ng-if="defaultLan == 'English'" class="bar_title" style="color: #fff">Create your account</h1>
  </div>
  <ion-content has-bouncing="true" overflow-scroll="true" id="new_register" style="background-color:#ffffff;"
    class="has-header web-style">
    <div ng-if="defaultLan == 'Chinese'"
      style="display:flex;justify-content: center;align-items: center;height: 138px;">
      <!-- <img ng-src="{{titleLogo}}" width="65%" height="31" style="display: block;margin:50px auto 53px" /> -->
      <span class="loginLogo">欢迎加入</span>
    </div>
    <div ng-if="defaultLan == 'English'"
      style="display:flex;justify-content: center;align-items: center;height: 138px;">
      <span class="loginLogo">欢迎加入</span>
    </div>
    <div class="login-mian">
      <div class="register-content">
        <form name="form" novalidate="novalidate">
          <div class="input-wrap row row-center reg" ng-class="{warn:form.tel.$dirty&&form.tel.$error.required}">
            <label ng-if="defaultLan == 'Chinese'" class="left-icon-wrap">
              手机号
            </label>
            <label ng-if="defaultLan == 'English'" class="left-icon-wrap">
              Mobile Phone
            </label>
            <input type="tel" class="col login-input " name="tel" ng-model="user.name" ng-minlength="11"
              ng-maxlength="11" required ng-pattern="/1[3|4|5|7|8|9][0-9]{9}/" ng-focus />
            <span class="login_pep"></span>
          </div>
          <div style="width: 100%; height: 20px; position: absolute;top:55px;">
            <span ng-if="(form.tel.$invalid&&form.tel.$dirty &&!form.tel.$focused) || (form.tel.$invalid && submitted )"
              class="tel_error">
              <!--//验证1-->
              <small ng-if="form.tel.$error.required && defaultLan == 'Chinese'">*请输入手机号</small>
              <small ng-if="form.tel.$error.required && defaultLan == 'English'">*Please enter mobile phone</small>
              <!--//验证2-->
              <small ng-if="form.tel.$error.pattern && defaultLan == 'Chinese'">*请填写正确的手机号</small>
              <small ng-if="form.tel.$error.pattern && defaultLan == 'English'">*Please enter correct mobile
                phone</small>
              <!--//验证3-->
              <small ng-if="form.tel.$error.maxlength && defaultLan == 'Chinese'">手机号不能多于11位</small>
              <small ng-if="form.tel.$error.maxlength && defaultLan == 'English'">Mobile phone number cannot be more
                than 11 digits</small>
            </span>
          </div>
          <div class="input-wrap row row-center mt-20 reg"
            ng-class="{warn:form.password.$dirty&&form.password.$error.required}" ng-focus="input_focus()">
            <label ng-if="defaultLan == 'Chinese'" class="left-icon-wrap re_password">
              密码
            </label>
            <label ng-if="defaultLan == 'English'" class="left-icon-wrap re_password">Password</label>
            <input type="{{show_psd ? 'text' : 'password'}}" class="col login-input" name="password"
              ng-model="user.password" id="password" required ng-focus
              ng-pattern="/^(?=.*?[0-9])(?=.*?[a-z])[0-9a-z]{7,}$/" ng-maxlength="20" ng-minlength="7" />

            <button class="psd-control" ng-click="showPassword()">
              <i class="icon  {{show_psd ? 'ion-ios-unlocked-outline' : 'ion-ios-locked-outline'}} "
                style="font-size: 26px;"></i>
            </button>
            <!--  <button class="psd-control" ng-click="showPassword()">
                <i class="icon  {{show_psd ? 'icon-psddisvisiable' : 'icon-psdvisiable'}} " ></i>
              </button>-->
          </div>
          <div style="width: 100%; height: 20px; position: absolute;top:125px;text-align: center">
            <span class="tel_error"
              ng-if="(form.password.$invalid && form.password.$dirty && !form.password.$focused) || (form.password.$invalid && submitted)">
              <small ng-if="defaultLan == 'Chinese'&& form.password.$error.pattern">密码不能少于8位,必须包含字母、特殊字符、阿拉伯数字</small>
              <small ng-if="defaultLan == 'English' && form.password.$error.pattern">The password cannot be less than 6
                characters and must contain letters and Arabic numbers</small>
              <small ng-if="form.password.$error.maxlength && defaultLan == 'Chinese'">密码不能多于20位</small>
              <small ng-if="form.password.$error.maxlength && defaultLan == 'English'">Password cannot be more than 20
                digits</small>
              <small ng-if="form.password.$error.required && defaultLan == 'Chinese'">密码不能为空</small>
              <small ng-if="form.password.$error.required && defaultLan == 'English'">Password cannot be empty</small>
            </span>
          </div>

          <div class="input-wrap row row-center mt-20 reg"
            ng-class="{warn:(form.repeat_password.$dirty&&form.repeat_password.$error.required )||(form.repeat_password.$dirty&&repeat_password!=password)}"
            ng-focus="input_focus()">
            <label ng-if="defaultLan == 'Chinese'" class="left-icon-wrap">
              确认密码
            </label>
            <label ng-if="defaultLan == 'English'" class="left-icon-wrap">
              Confirm Password
            </label>
            <input type="{{show_psd1 ? 'text' : 'password'}}" class="col login-input" ng-model="user.repeat_password"
              name="repeat_password" ng-focus ng-maxlength="20" ng-minlength="6" id="repeat_password"
              ng-pattern="/^(?=.*?[0-9])(?=.*?[a-z])[0-9a-z]{7,}$/" required pw-check="password" />
            <button class="psd-control" ng-click="showPassword1()">
              <i class="icon  {{show_psd1 ? 'ion-ios-unlocked-outline' : 'ion-ios-locked-outline'}} "
                style="font-size: 26px;"></i>
            </button>

          </div>
          <div style="width: 100%; height: 20px; position: absolute;top:197px;text-align: center">
            <span class="tel_error"
              ng-if="(form.repeat_password.$invalid && form.repeat_password.$dirty && !form.repeat_password.$focused) || (form.repeat_password.$invalid && submitted)">
              <small ng-if="defaultLan == 'Chinese'&& form.repeat_password.$error.pattern">密码不能少于8位,必须包含字母与阿拉伯数字</small>
              <small ng-if="defaultLan == 'English' && form.repeat_password.$error.pattern">The password cannot be less
                than 6 characters and must contain letters and Arabic numbers</small>
              <small ng-if="form.repeat_password.$error.maxlength && defaultLan == 'Chinese'">*密码不能多于20位</small>
              <small ng-if="form.repeat_password.$error.required && defaultLan == 'Chinese'">*密码不能为空</small>
              <small ng-if="form.repeat_password.$error.maxlength && defaultLan == 'English'">*Password cannot be more
                than 20 digits</small>
              <small ng-if="form.repeat_password.$error.required && defaultLan == 'English'">*Password cannot be
                empty</small>
            </span>
            <span class="tel_error" ng-if="form.repeat_password.$valid">
              <small ng-if="user.repeat_password!=user.password && defaultLan == 'Chinese'">*密码和确认密码不一致!!</small>
              <small ng-if="user.repeat_password!=user.password && defaultLan == 'English'">*Password and confirm
                password are inconsistent</small>
            </span>
          </div>

          <!--<div class="input-wrap row row-center mt-20 reg">
            <label  class="left-icon-wrap">
             验证码
            </label>
            <input type="text" class="col login-input" placeholder="输入6位验证码">
            <button class="psd-control" style="width: 25%; border: none;background-color:#fff;border-left:1px solid #56c8f2;height:50%;line-height: 50%;">
              <div class="button-verification-code">
               获取验证码
              </div>
            </button>
          </div>-->
          <!-- <p class="text">如果您未接收到验证码，请检查手机是否设置短信拦截</p>-->
          <div class=" text-left" style="width: 100%;padding: 10px;text-align: center;" ng-if="defaultLan == 'Chinese'">
            <span ng-click="readCommition()" ng-class="{'submit-mark':true,'bg-blue':readCommit}">
              <i class="icon ion-checkmark-round"></i>
            </span>
            <span>同意接受</span>
            <span style="color: blue" ng-click="showRegistePolicy()">《平台注册协议》</span>
            <span>及</span>
            <span style="color: blue" ng-click="showPrivacyPolicy()">《平台隐私政策》</span>
          </div>
          <div style="width: 100%; height: 20px;color: red;font-size: 12px;padding: 10px;text-align: center"
            ng-if="defaultLan == 'Chinese'&&readCommit==false&&form.tel.$dirty&&form.password.$dirty&&form.repeat_password.$dirty&&form.repeat_password.$valid&&form.password.$valid&&form.tel.$valid&&user.repeat_password==user.password">
            <span>您尚未接受《平台注册协议》，请勾选后再注册！</span>
          </div>
          <div class="blank-h12"></div>
          <button ng-if="defaultLan == 'Chinese'"
            class="button button-block  button-positive my_register {{register_finish}}" ng-click="register(user)"
            type="submit"
            ng-disabled="(form.tel.$pristine||form.password.$pristine||form.repeat_password.$pristine)||(form.tel.$dirty&&form.tel.$invalid )||(form.password.$dirty&& form.password.$invalid)||(form.repeat_password.$dirty&& form.repeat_password.$invalid)||(user.repeat_password!=user.password)||(readCommit== false)">
            注册
          </button>
          <button ng-if="defaultLan == 'English'"
            class="button button-block  button-positive my_register {{register_finish}}" ng-click="register(user)"
            type="submit"
            ng-disabled="
                    (form.tel.$pristine||form.password.$pristine||form.repeat_password.$pristine)||(form.tel.$dirty&&form.tel.$invalid )||(form.password.$dirty&& form.password.$invalid)||(form.repeat_password.$dirty&& form.repeat_password.$invalid)||(user.repeat_password!=user.password)">
            Register
          </button>
          <!--<p class="text">点击 “注册新账号” 即表示您同意并遵守lion<a class="link-text" href="#/userText">用户协议</a>和<a class="link-text" href="#/protocolText">隐私政策</a></p>-->
        </form>
      </div>
    </div>
    <!-- <div class="dm-date-picker" data-dateok="{{dateok}}" okcallback="enabledBook(day)" notokcallback="disabledBook(day)"></div> -->

  </ion-content>
  <div ng-if="isWechat" ng-show="showMessage" class="container">
    <div class="message-box">{{messageTitle}}</div>
  </div>
</ion-view>
<style>
  @media screen and (min-width:900px) {
    .web-style {
      position: absolute;
      width: 50% !important;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      height: 100%;
      overflow: hidden;
      margin-top: 30px;
    }

    .scroll-content .scroll {
      width: 65% !important;
    }
  }

  .loginLogo {
    font-size: 35px;
    font-weight: 600;
    height: 40px;
    line-height: 40px;
    letter-spacing: 10px;
    background-image: -webkit-linear-gradient(bottom, blue, #3B8BD0, yellow);
    color: #3B8BD0;
    -webkit-background-clip: text;
    background-clip: text;
    margin: 0;
  }
</style>