麦乐学园

返回列表
查看: 80|回复: 1

[图文教程] [跟亚子学Angular] 008. 表单验证-实例

[复制链接]
发表于 2017-1-8 22:33:33 | 显示全部楼层 |阅读模式
由于代码有点长 所以单独发一个帖子出来。
<!DOCTYPE html>
<html lang="en">

        <head>
                <meta charset="UTF-8">
                <title>Document</title>
                <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
                <style>
                body {
                        margin-top: 20px;
                }
                </style>
        </head>

        <body ng-app="app">
                <div class="container">
                        <div class="panel panel-info" ng-controller="main">
                                <div class="panel-heading">
                                        <h3 class="panel-title">签订契约</h3>
                                </div>
                                <div class="panel-body">
                                        <form name="reg" class="form-horizontal" novalidate="novalidate">
                                                <div class="form-group">
                                                        <label for="user" class="col-sm-2 control-label">账号</label>
                                                        <div class="col-sm-6">
                                                                <input name="user" type="text" class="form-control" id="user" placeholder="请输入账号..." required="required" ng-minlength="4" ng-maxlength="30" ng-model="regInfo.user">
                                                        </div>
                                                        <div class="col-sm-4">
                                                                <div ng-hide="reg.user.$dirty">账号要求在 4-30 位</div>
                                                                <div ng-show="reg.user.$dirty && (reg.user.$error.minlength || reg.user.$error.maxlength)">格式不正确</div>
                                                                <div ng-show="reg.user.$dirty && reg.user.$valid">Ok!</div>
                                                        </div>
                                                </div>
                                                <div class="form-group">
                                                        <label for="pass" class="col-sm-2 control-label">密码</label>
                                                        <div class="col-sm-6">
                                                                <input name="pass" type="password" class="form-control" id="pass" placeholder="请输入密码..." required="required" ng-minlength="6" ng-maxlength="20" ng-model="regInfo.pass">
                                                        </div>
                                                        <div class="col-sm-4">
                                                                <div ng-hide="reg.pass.$dirty">密码要求在 6~20 位</div>
                                                                <div ng-show="reg.pass.$dirty && (reg.pass.$error.minlength || reg.pass.$error.maxlength)">格式不正确</div>
                                                                <div ng-show="reg.pass.$dirty && reg.pass.$valid">Ok!</div>
                                                        </div>
                                                </div>
                                                <div class="form-group">
                                                        <label for="repass" class="col-sm-2 control-label">重复密码</label>
                                                        <div class="col-sm-6">
                                                                <input name="repass" type="password" class="form-control" id="repass" placeholder="重复上面的密码..." ng-model="regInfo.repass">
                                                        </div>
                                                        <div class="col-sm-4">
                                                                <div ng-hide="reg.repass.$dirty">重复上面的密码</div>
                                                                <div ng-show="reg.repass.$dirty && regInfo.repass!=regInfo.pass">两次输入不一致</div>
                                                                <div ng-show="reg.repass.$dirty && regInfo.repass==regInfo.pass">Ok!</div>
                                                        </div>
                                                </div>
                                                <div class="form-group">
                                                        <label for="email" class="col-sm-2 control-label">邮箱</label>
                                                        <div class="col-sm-6">
                                                                <input name="email" type="email" class="form-control" id="email" placeholder="请输入你的邮箱..." required="required" ng-minlength="6" ng-maxlength="30" ng-model="regInfo.email">
                                                        </div>
                                                        <div class="col-sm-4">
                                                                <div ng-hide="reg.email.$dirty">邮箱 6-30 位</div>
                                                                <div ng-show="reg.email.$dirty && reg.email.$error && !reg.email.$valid">邮箱输入错误</div>
                                                                <div ng-show="reg.email.$dirty && reg.email.$valid">Ok!</div>
                                                        </div>
                                                </div>
                                                <div class="col-sm-offset-2">
                                                        <div class="checkbox">
                                                                <label>
                                                                        <input type="checkbox" checked="checked" disabled="disabled"> 与亚子签订契约, 成为亚子的RBQ
                                                                </label>
                                                        </div>
                                                </div>
                                        </form>
                                </div>
                                <div class="panel-footer text-right">
                                        <button type="submit" class="btn btn-primary" ng-disabled="reg.$invalid" ng-click="rbq()">提交</button>
                                </div>
                        </div>
                </div>

        </body>

</html>
<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.4.14/angular.min.js"></script>
<script>
angular
        .module("app", [])
        .controller("main", function($scope, $filter) {
                $scope.rbq = function() {
                        alert("恭喜尼成为亚子第5674号 RBQ: \r\n" + $filter("json")($scope.regInfo));
                }
        });
</script>


不过,我们发现 即使AngularJS已经为我们提供了那么多验证的指令。但是还是觉得有些麻烦。
所以,AngularJS 中有个 ng-message 的东西,可以更加方便我们去使用。
回复

使用道具 举报

发表于 2017-1-10 16:20:54 | 显示全部楼层
这代码看着插清新 虽然人邋遢了点
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 加入我们

本版积分规则

Archiver|手机版|小黑屋| MLG8.CC

Copyright © 2015-2016 Comsenz Inc.   All Rights Reserved.

Powered by Discuz! X3.2( 宁ICP备16002180号 )

快速
回复
返回
列表
返回
顶部