angular-ui-router登录表单验证及跳router跳转示例代码

代码语言:html

所属分类:表单美化

代码描述:angular-ui-router登录表单验证及跳router跳转示例代码,使用state来根据登录验证结果显示不同的路由页面。

代码标签: angular 登录 表单 验证

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">


</head>

<body>
    <div class="container" ng-app="myApp">
        <div class="row">
            <div class="col-md-12">
                <div class="page-header">
                    <h1>{{ title }}</h1>
                </div>
            </div>

            <div ui-view></div>

        </div>

        <script type="text/ng-template" id="login.html">
            <div class="col-md-12">
                <h3>Login Page</h3>

                <form ng-submit="formSubmit()" class="form">
                    <div class="col-md-4">
                        <div class="form-group">
                            <input type="text" class="form-control" ng-model="username" placeholder="username" required="" />
                        </div>

                        <div class="form-group">
                            <input type="password" class="form-control" ng-model="password" placeholder="password" required="" />
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-success">Login</button>
                            <span class="text-danger">{{ error }}</span>
                        </div>

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

        <script type="text/ng-template" id="home.html">
            <div class="col-md-12">
                <h3>Home Page</h3>

                <a ui-sref="login">Back</a>
            </div>
        </script>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.4.3.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/.........完整代码请登录后点击上方下载按钮下载查看

网友评论0