以角度登录页面并验证它 [英] Login page in angular and validate it
本文介绍了以角度登录页面并验证它的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何创建登录页面并验证它，并在登录按钮上单击重定向到另一个页面并从服务器绑定表中获取数据？
什么我试过了：
login.html
how to create a login page and validate it ,and on login button click redirect to another page and fetch data from server bind table ?
What I have tried:
login.html
<!DOCTYPE html>
<html ng-app="QuickMoveMailApp">
<head>
<meta charset="UTF-8">
<title>Flat UI Login</title>
<link href="Style.css" rel="stylesheet" />
<script src="../Script/angular.min.js"></script>
<script src="../Script/Mail.js"></script>
</head>
<body ng-controller="QuickMoveMailLogin">
<div class="logindiv" ng-form="loginForm">
<h2>Please Login</h2>
<div style="color:red">
<span style=" padding-left:11%" ng-show="loginForm.txtUserName.$touched && loginForm.txtUserName.$invalid">
<span ng-show="loginForm.txtUserName.$error.required">Please Enter User Name ! </span>
</span>
<br />
<span style="padding-left:8%" ng-show="loginForm.txtpassword.$touched && loginForm.txtpassword.$invalid">
<span ng-show="loginForm.txtpassword.$error.required">Please Enter Password !</span>
</span>
</div>
<table>
<tr>
<td><label>User Name :</label></td><td><input type="text" name="txtUserName" ng-model="txtUserName" autofocus required /></td>
</tr>
<tr>
<td><label>Password :</label></td><td><input type="password" name="txtpassword" ng-model="txtpassword" required /></td>
</tr>
<tr>
<td colspan="2"><p><a href="#">Forget Password</a></p></td>
</tr>
<tr>
<td></td><td><button ng-click="GotoInbox()">Login</button><td>
</tr>
</table>
</div>
</body>
</html>
inbox.html
inbox.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Inbox.css" rel="stylesheet" />
<script src="../Script/angular.min.js"></script>
</head>
<body ng-app="QuickMoveMail">
<div ng-controller="QuickMoveMailController" class="divHeader">
<img src="download.png" style="width:17.3%;height:99%"/>
<div class="divSearch">
<input type="text" class="tftextinput" name="q" size="21" maxlength="120"/><input type="submit" value="search" class="tfbutton"/>
</div>
</div>
<div class="headerMenu"></div>
<div class="menuDiv">
<div><button class="composeButton">COMPOSE</button></div>
<div><a href="#" >Inbox</a></div>
<div><a href="#">Starred</a></div>
<div><a href="#">Sent Mail</a></div>
<div><a href="#">Draft</a></div>
</div>
<div>
<table>
<tr ng-repeat="EmailClass in EmailClassList">
<td>{{EmailClass.MessageNumber}}</td>
<td>{{EmailClass.From}}</td>
<td>{{EmailClass.Subject}}</td>
<td>{{EmailClass.DateSent}}</td>
</tr>
</table>
</div>
</body>
</html>
webservice
webservice
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using OpenPop.Pop3;
using OpenPop.Mime;
using Email.Model;
using System.Web.Script.Serialization;
namespace Email
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class EmailWebService : System.Web.Services.WebService
{
private const string MAILSERVER = "pop.gmail.com";
private const int PORT = 995;
private const bool SSL = true;
[WebMethod]
public void GetMail(string userName, string password)
{
List<EmailClass> EmailList = new List<EmailClass>();
Pop3Client pop3Client = new Pop3Client();
Pop3Client popClient = new Pop3Client();
popClient.Connect(MAILSERVER, PORT, SSL);
popClient.Authenticate(userName, password);
pop3Client = popClient;
int count = pop3Client.GetMessageCount();
for (int i = 1; i < 11; i++)
{
EmailClass email = new EmailClass();
Message message = pop3Client.GetMessage(i);
email.MessageNumber = i;
email.From = Convert.ToString(message.Headers.From);
email.Subject = message.Headers.Subject;
email.DateSent = Convert.ToString(message.Headers.DateSent);
EmailList.Add(email);
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(EmailList));
}
}
}
样式表
style sheet
body {
margin: 0;
padding: 0;
font-family: Sans-serif;
background: #c2f442;
text-align:center;
}
.logindiv {
height:50%;
border:2px solid;
color:#66ff33;
margin-top:12%;
width:38%;
margin-left:30%;
background-color:#42444e;
}
table tr td {
padding:5px;
}
table {
width:100%;
padding-bottom:37px;
}
td:nth-child(odd){
text-align:right;
font-weight:600;
color:#f2f2f2;
}
td:nth-child(even){
text-align:left;
}
input {
padding-left: 2px;
width: 72%;
height: 130%;
border-color: red;
border-width: 2px;
border-radius: 6px;
color:#006680;
font-weight:600;
padding-left:2%;
}
input:hover {
border-color: #ff9900;
background-color:#ffe6ff;
}
button {
width: 34%;
border-radius: 6px;
height: 181%;
font-weight: bolder;
color: #9900ff;
background-color: #ffcc00;
}
button:hover {
background-color:#ffa366;
color:#0d1a00;
}
a {
color:#66ff33;
padding-right:79px;
}
inbox.css
inbox.css
body {
width:100%;
padding:0px 0px ;
}
.divHeader {
margin-top: -8px;
margin-left: 0px;
width: 100%;
background-color: #c2f0f0;
height: 70px;
}
.tftextinput{
margin: 0;
padding: 8px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
border:1px solid #0076a3; border-right:0px;
border-top-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
margin-left:-14px;
width:46%;
}
.tfbutton {
margin: 0;
padding: 8px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
color: #ffffff;
border: solid 1px #0076a3; border-right:0px;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
}
.tfbutton:hover {
text-decoration: none;
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
}
.tfbutton::-moz-focus-inner {
border: 0;
}
.tfclear{
clear:both;
}
.divSearch {
margin-top: -53px;
margin-left: 29%;
}
.menuDiv {
display:block;
float:left;
width:210px;
height:540px;
border: 2px solid black;
}
.menuDiv div {
padding:5px 31%;
}
a {
text-decoration:none;
color:black;
font-weight:500;
}
.headerMenu {
margin-left: -9px;
height: 54px;
width: 100%;
border: 1px solid #c2f0f0;
}
.composeButton {
width: 127%;
height: 29px;
background-color: #d14836;
color: white;
border-radius: 4px;
font-size: 12px;
}
/// <reference path="angular.min.js" />
var app = angular.module("QuickMoveMailApp", [])
.controller("QuickMoveMailLogin", function ($scope, $stateProvider) {
$scope.GotoInbox = function () {
window.location = "../MAIL/Inbox.html";
}
})推荐答案
touched && loginForm.txtUserName.
touched && loginForm.txtUserName.
invalid\">
<span ng-show=\"loginForm.txtUserName.
invalid"> <span ng-show="loginForm.txtUserName.
error.required\">Please Enter User Name ! </span>
</span>
<br />
<span style=\"padding-left:8%\" ng-show=\"loginForm.txtpassword.
error.required">Please Enter User Name ! </span> </span> <br /> <span style="padding-left:8%" ng-show="loginForm.txtpassword.
这篇关于以角度登录页面并验证它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
