如何使用 angular js 验证 ionic 中的表单

Question

我正在尝试将 ionic 框架与 angular.I 一起使用，想验证按钮上的表单 click.Mean 我需要验证按钮上的所有字段 click.All 字段是必需的。 .如果字段不满足要求，我需要显示一条错误消息。比如密码最少 5 个字符，最多 10 个字符。还有电子邮件验证。

你能告诉我我会怎么做吗validation.Here是我的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>

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; });
            });
        }
    }

}());

如果标记为无效，此代码将遍历所有输入字段并添加 class。

你需要定义一个css:

.form-validate.ng-invalid {
    border: 3px solid #cc2511;
}
.form-validate.ng-valid {
    border: none;
}

别忘了将 novalidate 添加到您的表单中。

novalidate is used to disable browser's native form validation.

如果要将字段设置为必填字段并定义最大和最小长度：

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

如果您想实际查看此示例，可以查看它 here。

更新

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

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

这里你必须给每个字段一个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.

您可以看到它的实际效果 here。

如何使用 angular js 验证 ionic 中的表单

how to validate form in ionic using angular js

javascript

angularjs

angularjs-directive

angularjs-scope

ionic-framework