发表于: 2017-04-15 23:28:30

2 1310


今天完成的事情:给任务6添加了表单验证

明天计划的事情:准备小课堂

遇到的问题:

angular感觉还是没入门,有很多东西都不知道,要经常百度。连jq用起来都不熟练了。

收获:

关于ng-messages的使用,见注释:


<form name="loginForm">
   <div class="input-wrap">
       <img src="images/count.png">
       <input type="text"
              class="log-text"
              //与下面的userName对应
              name="userName"
              placeholder="请输入账号"
              ng-model='account'

              maxlength="16"

              //设置字段:字母和数字

              pattern="^[A-Za-z\d]+$"
              ng-minlength="3"
              required>
   </div>

   <div class="count-check">

      //.$touched在第一次聚焦后再失焦会变为true,第一次聚焦填表单时不会验证

       <div ng-messages="loginForm.userName.$error" ng-if="loginForm.userName.$touched">
           <p ng-message="required">*请输入账号</p>

           <p ng-message="minlength">*账号至少3</p>

           <p ng-message='pattern'>账号为英文或数字</p>
       </div>
   </div>
   <div class="input-wrap">
       <img src="images/lock.png">
       <input type="password"
              name="passWord"
              ng-model='password'

              class="log-password"
              placeholder="请输入密码"
              minlength="5"
              maxlength="20"
              required>
   </div>
   <div class="password-check">
       <div ng-messages="loginForm.passWord.$error" ng-if="loginForm.passWord.$touched">
           <p ng-message="required">*请输入密码</p>

           <p ng-message="minlength">*密码为620</p>

       </div>
   </div>
</form>

//提交按钮,在ng-message检验到错误输入时,应该拒绝触发ng-click事件

// ng-message检验到错误输入时,$invalid 为true


<button  ng-click="login()" ng-disabled="loginForm.$invalid">

   登录
</button>



返回列表 返回列表
评论

    分享到