我正在尝试使用带有angular的离子框架。我想对按钮click上的表单进行验证。意思是我需要对按钮click上的所有字段进行验证。所有字段都是必需的。如果一个字段需要显示错误消息不符合要求。如密码,最小字符5,最大10。以及电子邮件验证。
你能告诉我我将如何进行验证。这是我的代码
<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>
我可能会迟到,但是您可以执行以下操作。
首先,您需要使用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>
我正在将模型传递到我的输入字段,以便稍后阅读。我已经用自定义指令标记了每个输入form-validate-after
。
这是我创建的指令:
(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; });
});
}
}
}());
如果该代码标记为无效,则此代码将在所有输入字段中循环添加一个类。
您需要定义一个CSS:
.form-validate.ng-invalid {
border: 3px solid #cc2511;
}
.form-validate.ng-valid {
border: none;
}
不要忘记添加novalidate
到您的表单。
novalidate用于禁用浏览器的本机表单验证。
如果要将字段设置为必填字段并定义最大和最小长度:
<input name="password" type="password" placeholder="password" ng-model="$scope.user.password" required ng-minlength='5' ng-maxlength='10'>
如果您想查看此示例的实际运行情况,可以在此处进行检查。
更新
另一种方法是在每个标签上设置所有内联更改类:
<label class="item item-input" ng-class="{ 'has-errors' : loginForm.username.$invalid && !loginForm.username.$pristine, 'no-errors' : loginForm.username.$valid}">
...
</label>
在这里,您必须为每个字段指定一个name
并使用ng-class
指令。
ngClass指令允许您通过数据绑定表示要添加的所有类的表达式来动态设置HTML元素上的CSS类。
您可以在这里看到它的实际效果。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句