-
[北京|结业弟子]PM-刘仁瑞0<< span="">div class="login-box"><< span="">form class="login-table" name="myForm"><< span="">p class="title">后台登录p><< span="">div class="user-name"><< span="">img src="img/user.png"><< span="">input type="text" id="user" name="user" ng-model="name" ng-minlength="4" ng-maxlength="12" placeholder="用户名"required><< span="">span class="login-prompt" ng-show="myForm.user.$error.required&&myForm.user.$touched">请输入账号span><< span="">span class="login-prompt" ng-show="myForm.user.$error.minlength || myForm.user.$error.maxlength">用户名长度4-12字符span>div><< span="">div class="password"><< span="">img src="img/locked.png"><< span="">input type="password" id="password" name="password" ng-model="pwd" ng-minlength="6" max-length="16"placeholder="密码" required><< span="">div class="login-prompt"><< span="">span ng-show="myForm.password.$error.required&&myForm.password.$touched">请输入密码span><< span="">span ng-show="myForm.password.$error.minlength||myForm.password.$error.maxlength">密码长度6-16字符span><< span="">p>{{ loginMessage }}p>div>div><< span="">button type="submit" id="btn" class="login-btn" ng-click="login()" ng-disabled=myForm.$invalid>登录button>form>div>
代码如上,ng-minlength和ng-maxlength显示长度,不符合会有error.minlength或error.maxlength报错,ng-show=true显示验证“用户名长度4-12”。
required为必填项,表单未填写会有error.required报错,此时ng-show=true显示请输入账号/密码。
当表单验证失败,invalid=true,ng-disabled禁止点击按钮。避免无必要的点击。
编辑于2018-09-19
- 去第 页