用户输入正确的邮箱，密码后才能点击登陆按钮。
复制代码到html可直接运行：
代码如下:
<!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>
运行结果如下:
<script type="text/javascript">
$(function () {
$('pre.prettyprint code').each(function () {
var lines = $(this).text().split('\n').length;
var $numbering = $('<ul/>').addClass('pre-numbering').hide();
$(this).addClass('has-numbering').parent().append($numbering);
for (i = 1; i <= lines; i++) {
$numbering.append($('<li/>').text(i));
};
$numbering.fadeIn(1700);
});
});
</script>
分享到：
相关推荐
AngularJS是前端开发流行框架，本Demo展示了表单验证的意义，及实现方法，掌握Angular基础指令，通过不同的指令元素可以拥有不同功能，并通过指令与表单合作验证，从而实现表单验证的敏捷化开发。
在AngularJS中，表单验证是一项关键功能，它允许开发者实时检查用户输入的数据，确保其符合预期的格式和规则，从而提高用户体验并减少服务器端的压力。AngularJS的表单验证机制是基于模型驱动的，这使得它在处理复杂...
在AngularJS中，表单和输入验证通常包括以下几个关键知识点： 1. 数据绑定与模型(`ng-model`)： - `ng-model`指令用于在视图（HTML）和模型（JavaScript对象）之间建立双向数据绑定。 - 当用户在表单控件中输入...
使用angularJS完成表单验证功能
客户端表单验证是AngularJS里面最酷的功能之一。 AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。在AngularJS中，有许多表单验证指令。在这里，我们将谈谈几个最流行指令，然后...
- AngularJS2支持客户端验证，即在用户提交表单之前检查输入是否有效。 - 控制器级别的验证通过在FormControl对象上应用验证器实现，例如`formControlName.control.setValidators(Validators.required)`。 - 视图...
在AngularJS的学习过程中，表单验证是一个至关重要的环节，它能确保用户输入的数据符合预期的格式和规则，从而提高应用程序的稳定性和用户体验。本学习笔记将深入探讨AngularJS中的表单验证机制，主要包括以下几个...
下面我们将通过一个具体的示例来深入探讨如何使用JavaScript进行表单验证以确保两次输入的密码相同。 #### 示例代码分析 首先，我们来看一下题目给出的示例代码： ```html ()"> ...
在移动应用开发中，前端表单验证是必不可少的一部分，它能确保用户输入的数据符合预期，减少服务器负担，提升用户体验。AngularJS，作为一个强大的MVC框架，提供了强大的数据绑定和指令系统，非常适合构建复杂的...
AngularJS 会自动管理表单和输入字段的状态，包括`$pristine`（未触发表单）、`$dirty`（已触发表单）、`$valid`（有效）和`$invalid`（无效）。这些状态可以用来控制何时显示错误消息，例如： ```html $invalid &&...
在构建Web应用时，表单验证是至关重要的一个环节，它确保了用户输入的数据符合预设的规则，防止无效或恶意的数据进入系统。漂亮表单验证不仅涉及到视觉上的美观，还包括交互体验和逻辑验证。而密码强度验证则是保护...
开始学习AngularJS表单验证： 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写，只要在输入字段元素上添加HTML5...验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxlength=
在表单设计中，尤其是涉及到安全性要求较高的密码输入时，往往需要进行密码的验证，比如确保用户两次输入的密码一致。AngularJS提供了一种自定义指令的方式，可以扩展其功能以满足特定的业务需求，比如创建一个用于...
通过阅读和理解这个项目，你可以学习到如何在AngularJS中实现动态添加表单的完整流程，包括创建动态表单、数据模型的管理以及表单的验证和提交。 ### 5. 环境要求 注意，这个项目需要在Apache环境下运行，因为某些...
9. 表单状态属性：AngularJS中的表单状态属性能够帮助开发者判断表单是否被用户修改过（$pristine/$dirty），输入是否合法（$valid/$invalid），以及是否含有错误（$error）。 10. 控制表单变量：在AngularJS中，...
通过以上步骤，我们就创建了一个完整的Vue组件，用于验证用户输入的两次密码是否一致，并且保证密码长度在6到16个字符之间。当用户尝试提交表单时，只有当所有验证规则都通过时，表单才会被提交。这种做法提高了应用...
return "两次输入的密码不一致，请重新输入！"; else return ""; }); ``` 3. **处理表单提交**：在表单的提交事件中，我们需要检查 Spry 验证是否成功。如果验证失败，阻止表单的默认提交行为，显示错误消息。...
在网页开发中，表单验证是一项非常重要的任务，它确保用户输入的数据符合预期的格式，以提高数据质量并减少服务器端的压力。JavaScript 是一种常用的客户端脚本语言，它可以直接在用户的浏览器上运行，用于实现表单...
3. 验证函数：编写验证函数，检查输入是否符合预设规则，如非空、长度限制、格式校验等。 三、正则表达式在表单验证中的应用 正则表达式是一种强大的文本匹配工具，常用于验证输入的格式。例如： - 邮箱验证：`/^\w...