angularjs表单验证

来源：互联网发布：期货升贴水原因知乎编辑：程序博客网时间：2024/05/17 01:15
转载：http://blog.csdn.net/yhan219/article/details/45293251
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>register</title><link rel="stylesheet"    href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><script>    var app = angular.module('myApp', []);    app.controller('registerCtrl', function($scope) {    });</script></head><body onload="document.getElementById('email').focus()">    <div class="col-sm-6 col-sm-offset-3" ng-app="myApp"        ng-controller="registerCtrl">        <h1>用户注册</h1>        <form name="registerForm" novalidate>            <div id="email-group">                <label for="email">E-mail:</label> <input type="email"                    class="form-control" ng-model="email" name="email" id="email"                    placeholder="请输入电子邮箱..." required>                <p>                    <span style="color: red" ng-show=" registerForm.email.$invalid">                        <span ng-show="registerForm.email.$error.required">*请输入邮箱</span> <span                        ng-show="registerForm.email.$error.email">*请输入正确的email地址</span>                    </span>                </p>            </div>            <div id="name-group">                <label for="name">昵称：</label> <input type="text"                    class="form-control" ng-model="name" name="name" id="name"                    placeholder="请输入昵称..." required>                <p>                    <span style="color: red" ng-show="registerForm.name.$invalid">                        <span ng-show="registerForm.name.$error.required">*请输入姓名</span>                    </span>                </p>            </div>            <div id="password-group">                <label for="password">密码：</label> <input type="password"                    class="form-control" ng-model="password" ng-minlength="6"                    ng-maxlength="20" name="password" id="password"                    placeholder="请输入密码..." required>                <p>                    <span style="color: red" ng-show="registerForm.password.$invalid">                        <span ng-show="registerForm.password.$error.minlength">*密码长度不小于6</span>                        <span ng-show="registerForm.password.$error.maxlength">*密码长度不超过20</span>                    </span>                </p>            </div>            <div id="passwordagaingroup">                <label for="passwordagain">再输入一遍密码：</label> <input type="password"                    class="form-control" ng-model="passwordagain" name="passwordagain"                    id="passwordagain" placeholder="请再输一遍密码..." required>                <p>                    <span style="color: red" ng-show="registerForm.password.$valid">                        <span ng-show="passwordagain!=password">*两次密码输入不一致</span>                    </span>                </p>            </div>            <button type="submit" class="btn btn-success"                ng-disabled="registerForm.email.$invalid || registerForm.name.$invalid || registerForm.password.$invalid || password != passwordagain">                提交<span class="fa fa-arrow-right"></span>            </button>        </form>    </div></body></html>
0 0