AngularJS 注册(登录)表单验证

最新推荐文章于 2020-12-23 03:03:18 发布
最新推荐文章于 2020-12-23 03:03:18 发布
阅读量634 收藏 1
点赞数 1
文章标签： bootstrap angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43849864/article/details/103519839
版权
因为AngularJS项目中经常结合Bootstrap的样式或组件开发更漂亮美观的页面，所以建议读者先对Bootstrap做个简单了解。
  • Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
  • 需要下载的css样式表：bootstrap.min.css；js文件：angular.js → 从我的网盘分享获取
ng实现表单验证
  • 导入css&js（路径根据自己的存放目录而定）
<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/angular.js"></script>
</head>
  • 表单及验证
<body>
		<div ng-cloak ng-app="myApp" style="margin-top: 60px;">
			<form name="myForm" action="route.html" ng-controller="formController" class="container form-horizontal">
				<h1 style="margin-left: 330px;">Please complete registration...</h1>
				<p>&nbsp;</p>
				<div class="form-group has-feedback" ng-class="{'has-error':myForm.username.$dirty && myForm.username.$invalid}">
					<label class="col-sm-4 control-label">用户名</label>
					<div class="col-sm-4">
						<input type="text" autocomplete="off" name="username" ng-pattern="/^[a-zA-Z]{1}/" ng-required="true" required autofocus ng-minlength="2" ng-maxlength="7" ng-model="data.username" class="form-control" placeholder="start with an English letter">
						<div ng-show="myForm.username.$dirty && myForm.username.$error.maxlength" class="alert alert-danger help-block">
							用户名长度不能超过7位
						</div>
						<div ng-show="myForm.username.$dirty && myForm.username.$error.minlength" class="alert alert-danger help-block">
							用户名长度不能少于2位
						</div>
						<div ng-show="myForm.username.$dirty && myForm.username.$error.pattern" class="alert alert-danger help-block">
							用户名首位必须为英文字母
						</div>
					</div>
				</div>
				<div class="form-group" ng-class="{'has-error':myForm.age.$dirty && myForm.age.$invalid}">
					<label class="col-sm-4 control-label">年龄</label>
					<div class="col-sm-4">
						<input type="number" autocomplete="off" name="age" min="1" max="99" ng-required="true" ng-model="data.age" class="form-control" placeholder="1~99">
						<div ng-show="myForm.age.$dirty && myForm.age.$error.max" class="alert alert-danger help-block">
							年龄不能超过99岁
						</div>
						<div ng-show="myForm.age.$dirty && myForm.age.$error.min" class="alert alert-danger help-block">
							年龄不能小于1岁
						</div>
					</div>
				</div>

				<div class="form-group" ng-class="{'has-error':myForm.email.$dirty && myForm.email.$invalid}">
					<label class="col-sm-4 control-label">邮箱</label>
					<div class="col-sm-4">
						<input type="email" autocomplete="off" name="email" ng-required="true" ng-minlength="5" ng-maxlength="30" ng-model="data.email" class="form-control" placeholder="123@example.com">
						<div ng-show="myForm.email.$dirty && myForm.email.$error.maxlength" class="alert alert-danger help-block">
							邮箱长度不能超过30位
						</div>
						<div ng-show="myForm.email.$dirty && myForm.email.$error.minlength" class="alert alert-danger help-block">
							邮箱长度不能少于5位
						</div>
						<div ng-show="myForm.email.$dirty && myForm.email.$error.email" class="alert alert-danger help-block">
							邮箱格式不正确
						</div>
					</div>
				</div>
				<div class="form-group" ng-class="{'has-error':myForm.password.$dirty && myForm.password.$invalid}">
					<label class="col-sm-4 control-label">密 码</label>
					<div class="col-sm-4">
						<input type="password" autocomplete="off" name="password" ng-required="true" ng-minlength="6" ng-maxlength="10" ng-model="data.password" class="form-control" placeholder="password">
						<div ng-show="myForm.password.$dirty && myForm.password.$error.maxlength" class="alert alert-danger help-block">
							密码长度不能超过10位
						</div>
						<div ng-show="myForm.password.$dirty && myForm.password.$error.minlength" class="alert alert-danger help-block">
							密码长度不能少于6位
						</div>
					</div>
				</div>
				<div class="form-group" ng-class="{'has-error':myForm.passwordConfirm.$dirty && myForm.passwordConfirm.$invalid}">
					<label class="col-sm-4 control-label">确认密码</label>
					<div class="col-sm-4">
						<input type="password" autocomplete="off" name="passwordConfirm" ng-required="true" ng-model="data.passwordConfirm" class="form-control" placeholder="confirm password">
						<div ng-show="myForm.password.$dirty && myForm.passwordConfirm.$dirty && data.password!==data.passwordConfirm" class="alert alert-danger help-block">
							确认密码与密码不一致
						</div>
					</div>
				</div>

				<div class="form-group">
					<div class="col-sm-offset-4 col-sm-4">
						<button type="submit" class="btn btn-success col-sm-6" ng-click="confirm()" ng-disabled="myForm.$invalid||data.passwordConfirm!==data.password">注册</button>
						<button type="reset" class="btn btn-info col-sm-6" ng-click="reset()">重置</button>
					</div>
				</div>
			</form>
		</div>
		<script>
			angular.module('myApp', [])
				.controller('formController', ['$scope', function($scope) {
					$scope.confirm = function() {
						alert("恭喜你注册成功！")
					}
					$scope.reset = function() {
						$scope.myForm.$setPristine();
					}
				}]);
		</script>
	</body>

  • ng-show=""的内容表示验证格式符合则隐藏错误提示，否则显示` ；

  • ng-disabled=""表示注册按钮在表单验证成功前是禁用状态；

  • ng-click="confirm()"表示验证成功后弹窗提示；

  • action="route.html表示跳转页面

  • 效果图
    在这里插入图片描述
    在这里插入图片描述
    埋个伏笔：跳转后的route.html页面是这样的↓
    在这里插入图片描述
    想要实现图中的几个小功能，对ng路由感兴趣的小伙伴戳我的这篇文章 AngularJS路由实现-计算器、留言板、备忘录

weixin_43849864
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AngularJS登录注册
guoleisb10的博客
10-15 1540
test2         .state1{         color:#aaa;       }       .state2{         color:#000;       }       .state3{         color:red;       }       .state4{         color:green;       }    
Angular之简单的登录注册
weixin_30521161的博客
11-08 1505
使用Angular实现了一个简单的登录注册的功能........ 涉及到的Angular知识点很少 主要是这个功能的实现...(*^__^*) 嘻嘻…… 里面涉及到的知识点记录: 1.本地存储的操作 localStorage 获取本地存储的值 window.localStorage.getItem(key)-->value (得到的数据是字符串"[ { "name": "andi...
angular简单登录注册
weixin_30302609的博客
03-29 649
最近在学angularJs，今天写了一个非常简单的登录注册页面，大概熟悉了一下angularJs的语法。 后台数据模拟：user_info.json 1 登录页面 步骤一：首先要把页面给div出来。 页面主要代码： <div class="container main" data-ng-controller="loginCtrl"&...
AngularJS学习之 登录表单 清爽验证（边学边更新）
u011927449的博客
08-16 108
注册过程的确好多需要验证的，但是注册成功之后的登录就简单多了， 只要用户 输入 用户名和密码， ajax向后台提交登录请求， 根据返回的结果确定用户名或者密码是否正确即可登录。 所以这个登录表单的验证是非常简单清晰的 <div class="wrap" ng-controller="LoginCtrl"> <fieldset> <legend>后台登录系统</legend> <form> <p> .
angular获取手机验证码 移动端登录注册
蒲公英芽的博客
05-16 1823
之前一直在用jQuery来做项目，使用比较熟练，目前公司要求使用angular来做项目，遇到一个登录模块如下所示，功能有两个方面，一个是点击按钮获取验证码，一个是点击登录验证表单。从用户体验角度来考虑有两个要注意的地方，默认两个按钮应该都是不可点击的，输入正确的手机号时验证码的按钮可点击，当再输入验证码时登录按钮可点击。 代码结构如下：<form name="loginForm" ng-co
angularjs 表单校验指令_angularJS中的表单验证（包括自定义验证）
weixin_28222493的博客
12-23 491
表单验证是angularJS一项重要的功能，能保证我们的web应用不会被恶意或错误的输入破坏。Angular表单验证提供了很多表单验证指令，并且能将html5表单验证功能同他自己的验证指令结合起来使用，进而在客户端验证时提供表单状态的实时反馈。要使用表单验证，首先保证表单有一个name属性，一般的输入字段如最大，最小长度等，这些功能由html5表单属性提供，如果我们想屏蔽浏览器对表单的默认验证行为...
AngularJs 表单验证
你好，今天！
03-02 628
angularjs 表单验证进行表单验证时，第一步要确认form表单有name属性，eg. <form name='myForm'></form>,最好屏蔽掉浏览器的默认表单验证：novalidate.input上的所有验证选项：1. 必填项 验证必填项，直接在input元素内加上：‘required’ <input type=text required> 2. 最小长度 直接在inp
AngularJS实现注册表单验证功能
10-19
主要为大家详细介绍了AngularJS实现注册表单验证功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
详解AngularJS实现表单验证
10-23
以下是对AngularJS表单验证的详细说明： 1. **必填项验证**： 在HTML5中，`required`属性可以用来标记输入字段为必填。在AngularJS中，只需在`<input>`标签上添加此属性，如`...
AngularJS自动表单验证
10-22
在AngularJS中，表单验证是确保用户输入符合预设规则的关键功能，它有助于提高用户体验并确保数据的准确性。AngularJS提供了两种表单验证方式：手动验证和自动验证。本文将详细探讨自动验证机制，特别是如何利用...
angularjs $http实现form表单提交示例
10-19
主要介绍了angularjs $http实现form表单提交示例，非常具有实用价值，需要的朋友可以参考下
angular-6-registration-login-example：Angular 6用户注册和登录示例
01-31
angular-6注册登录示例 Webpack 4的Angular 6用户注册和登录示例 完整的示例教程可在
Angularjs 动态添加表单
05-03
本资料来源于github，可实现动态添加表单功能，代码简单，易学。不过需要在apache环境下运行。
Angularjs2表单+验证
05-09
两种表单1隐式和formBuilder，表单验证。
AngularJS实现表单验证功能
10-20
在AngularJS中，表单验证是一项关键功能，它允许开发者在用户输入数据时实时检查其有效性，从而确保数据的质量和一致性。本篇文章将详细介绍如何利用AngularJS实现表单验证。 首先，`ng-model`指令是AngularJS中用...
Angular实现登录注册页面路由跳转
weixin_45202083的博客
10-25 2264
app.module.ts: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; // import { RouterModule } from '@angular/router'; import { RouterModule, Routes } from '@angular/router'; import { AppComponent } from './a
【AngularJS】简单Demo实现用户登录
diyinqian的博客
08-01 6891
JS代码： var formApp = angular.module('formApp',[]); formApp.controller('formCtrl',function ($scope, $http, $location) { $scope.user={}; $scope.loginAction = function () { var host = l...
用Angular实现登录显示功能
热门推荐
张思阳的博客
05-21 1万+
1.功能介绍 检查用户是否登录，根据是否登录，决定显示的内容。 如果用户未登录，显示“注册 | 登录”；如果用户已登录：显示“Welcome xxx | 注销”。 2.实现步骤及代码 2.1 创建一个网络请求的服务 http.service.ts //a-service-http快捷键 import { Injectable } from '@angular/core'; impo...
Angularjs Form表单验证机制
weixin_43996999的博客
07-07 544
个人总结 one: 一般来讲表单可能遇到的问题 1.如何数据绑定 2.验证表单 3.显示出错信息 4.整个form的验证 5.避免提交没有验证通过的表单 6.防止多次提交 two: input表单验证需要的属性 name 名字(这里需要注意:不光是input元素需要,最外层的form标签也需要一个name属性) ng-model ...
AngularJs 表单提交按钮状态
最新发布
05-31
在 AngularJS 中，可以通过设置表单提交按钮的状态来防止用户多次提交表单。可以使用 `ng-disabled` 指令来控制提交按钮的状态，该指令可以绑定到表单的状态上。例如，可以在表单被提交时将按钮禁用，然后在表单处理...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值