angularjs表单验证

发布时间：2020-12-17 10:32:45 所属栏目：安全来源：网络整理

导读：转载：http://blog.csdn.net/yhan219/article/details/45293251 !DOCTYPE htmlhtmlheadmeta charset="UTF-8"titleregister/titlelink rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css"script src="http://apps.bdimg.

转载：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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!