Javascript 如何使用angular js在ionic中验证表单_Javascript_Angularjs_Angularjs Directive_Angularjs Scope_Ionic Framework

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

javascript angularjs ionic-framework

Javascript 如何使用angular js在ionic中验证表单,javascript,angularjs,angularjs-directive,angularjs-scope,ionic-framework,Javascript,Angularjs,Angularjs Directive,Angularjs Scope,Ionic Framework,我正在尝试使用带angular的ionic框架。我想在单击按钮时验证我的表单。这意味着我需要在单击按钮时验证所有字段。所有字段都是必需的。如果某个字段不满足要求，我需要显示错误消息。如密码最小字符5，最大字符10。和电子邮件验证你能告诉我如何进行验证吗？这是我的登录，然后单击选项卡示例名称电子邮件密码检查验证我可能会迟到，但你可以这么做首先，您需要使用ng submit指令定义一个表单（正如您所做的那样），以便将表单发布到控制器 <body ng-app="myApp"&

我正在尝试使用带angular的ionic框架。我想在单击按钮时验证我的表单。这意味着我需要在单击按钮时验证所有字段。所有字段都是必需的。如果某个字段不满足要求，我需要显示错误消息。如密码最小字符5，最大字符10。和电子邮件验证

你能告诉我如何进行验证吗？这是我的


登录，然后单击选项卡示例
名称
电子邮件
密码
检查验证

我可能会迟到，但你可以这么做

首先，您需要使用

ng submit

指令定义一个表单（正如您所做的那样），以便将表单发布到控制器

<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>

如果类被标记为无效，则此代码将在所有输入字段中循环添加该类

您需要定义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>

...

在这里，您必须为每个字段指定一个

名称

，并使用

ng class

指令

ngClass指令允许您在通过数据绑定表示所有类的表达式来创建HTML元素待补充

你可以在行动中看到它

<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>