如何使用角度js验证离子形式

Question

我试图使用带角度的离子框架.我想在按钮click.Mean上验证我的表单.我需要在按钮点击时验证所有字段.所有字段都是必需的..我需要显示一个错误消息,如果一个字段不符合要求.像密码最小字符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>

Answer 1

我可能会迟到,但这是你能做的.

首先,您需要使用该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用于禁用浏览器的本机表单验证.

如果要将字段设置为必填字段并定义max和min lenght:

<input name="password" type="password" placeholder="password" ng-model="$scope.user.password" required ng-minlength='5' ng-maxlength='10'>

如果您想查看此示例的实际操作,可以在此处查看.

UPDATE

另一种方法是在每个标签上设置所有内联更改类:

<label class="item item-input" ng-class="{ 'has-errors' : loginForm.username.$invalid && !loginForm.username.$pristine, 'no-errors' : loginForm.username.$valid}">
   ...
</label>

在这里,你必须给每个字段a name和use ng-class指令.

ngClass指令允许您通过数据绑定表示要添加的所有类的表达式来动态设置HTML元素上的CSS类.

你可以在这里看到它.