javascript 如何使用angular js验证离子形式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29128304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to validate form in ionic using angular js
提问by Shruti
I am trying to use the ionic framework with angular.I want to do validation of my form on button click.Mean I need to validate all field on button click.All field are required ..I need to show an error message if a field does not fulfil the requirement. Like password minimum character 5 and maximum 10. And email validation.
我正在尝试使用带有 angular 的 ionic 框架。我想在单击按钮时验证我的表单。意思是我需要在单击按钮时验证所有字段。所有字段都是必需的 ..如果一个字段，我需要显示错误消息不满足要求。像密码最小字符 5 和最大 10。和电子邮件验证。
could you please tell m how I will do validation.Here is my code
你能告诉我我将如何进行验证。这是我的代码
<html ng-app="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Sign-in, Then Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
<ion-view title="Page">
<ion-content padding="true" class="has-header has-footer">
<form>
<label class="item item-input">
<span class="input-label">name</span>
<input type="text" placeholder="name">
</label>
<label class="item item-input">
<span class="input-label">email</span>
<input type="email" placeholder="email">
</label>
<label class="item item-input">
<span class="input-label">password</span>
<input type="password" placeholder="password">
</label>
</form>
<button class="button button-balanced button-block">check validation</button>
</ion-content>
</ion-view>
</body>
</html>
回答by LeftyX
I might be late but here's what you can do.
我可能会迟到，但这是你可以做的。
First of all you need to define a form (as you did) using the ng-submitdirective so that your form can be POST to the controller.
首先，您需要使用ng-submit指令定义一个表单（就像您所做的那样），以便您的表单可以 POST 到控制器。
<body ng-app="myApp">
<ion-view title="Page">
<ion-content padding="true" class="has-header has-footer">
<form name="loginForm" ng-submit="$scope.login($scope.user);" novalidate>
<label class="item item-input">
<span class="input-label">name</span>
<input type="text" placeholder="name" ng-model="$scope.user.username" form-validate-after>
</label>
<label class="item item-input">
<span class="input-label">email</span>
<input type="email" placeholder="email" ng-model="$scope.user.email" form-validate-after>
</label>
<label class="item item-input">
<span class="input-label">password</span>
<input type="password" placeholder="password" ng-model="$scope.user.password" form-validate-after>
</label>
</form>
<button class="button button-balanced button-block">check validation</button>
</ion-content>
</ion-view>
</body>
I am passing a model to my input field so I can read them later.
I've marked each input with a custom directive form-validate-after.
我正在将模型传递给我的输入字段，以便稍后阅读它们。我用自定义指令标记了每个输入form-validate-after。
This is the directive I've created:
这是我创建的指令：
(function () {
'use strict';
angular
.module('myApp', ['ionic'])
.directive('formValidateAfter', formValidateAfter);
function formValidateAfter() {
var directive = {
restrict: 'A',
require: 'ngModel',
link: link
};
return directive;
function link(scope, element, attrs, ctrl) {
var validateClass = 'form-validate';
ctrl.validate = false;
element.bind('focus', function (evt) {
if (ctrl.validate && ctrl.$invalid) // if we focus and the field was invalid, keep the validation
{
element.addClass(validateClass);
scope.$apply(function () { ctrl.validate = true; });
}
else {
element.removeClass(validateClass);
scope.$apply(function () { ctrl.validate = false; });
}
}).bind('blur', function (evt) {
element.addClass(validateClass);
scope.$apply(function () { ctrl.validate = true; });
});
}
}
}());
this code will loop through all your input fields adding a class if it is marked as non-valid.
如果它被标记为无效，此代码将遍历所有输入字段添加一个类。
You need to define a css:
你需要定义一个css：
.form-validate.ng-invalid {
border: 3px solid #cc2511;
}
.form-validate.ng-valid {
border: none;
}
don't forget to add novalidateto your form.
不要忘记添加novalidate到您的表单中。
novalidate is used to disable browser's native form validation.
novalidate 用于禁用浏览器的原生表单验证。
If you want to set a field as mandatory and define max and min lenght:
如果要将字段设置为必填字段并定义最大和最小长度：
<input name="password" type="password" placeholder="password" ng-model="$scope.user.password" required ng-minlength='5' ng-maxlength='10'>
If you want to see this sample in action you can check it here.
如果您想查看此示例的实际效果，可以在此处查看。
UPDATE
更新
Another approach is to set everything in-line changing class on each label:
另一种方法是在每个标签上设置所有在线更改类：
<label class="item item-input" ng-class="{ 'has-errors' : loginForm.username.$invalid && !loginForm.username.$pristine, 'no-errors' : loginForm.username.$valid}">
...
</label>
Here you have to give each field a nameand use ng-classdirective.
在这里你必须给每个字段一个name和使用ng-class指令。
The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.
ngClass 指令允许您通过数据绑定表示要添加的所有类的表达式，在 HTML 元素上动态设置 CSS 类。
You can see it in action here.
你可以在这里看到它的实际效果。
