在angularjs中进行客户端验证

我在学习AngularJS，并且在验证客户端的表单输入时遇到了问题。我在Yii2有一个REST API，并在服务器端验证注册表单。我想添加一些客户端验证也。下面是一个输入的代码（其他几乎是相同的）：在angularjs中进行客户端验证

<form ng-submit="register()" name="registerForm" id="register-form" method="post" role="form" novalidate> 
    <div ng-class="{ 'has-success': (!error['login'] && submitted) || (registerForm.login.$touched && registerForm.login.$valid), 
    'has-error': (error['login'] && submitted) || (registerForm.login.$touched && registerForm.login.$invalid) }" 
    class="form-group"> 
    <label class="control-label" for="login">Username</label> 
    <input ng-model="registrationForm.login" type="text" id="login" class="form-control" name="login" required> 
    <p class="help-block help-block-error">{{ error['login'] }}</p> 
    <p class="help-block" ng-show="registerForm.login.$invalid && registerForm.login.$touched">This field is required.</p> 
</div> 
... (other inputs) 
</form>

一些解释：已-成功应设置如果输入有效的 - 第一支架是用于服务器端验证，二是针对客户端侧。 - 第一个求助块显示服务器端验证错误 - 第二求助块显示客户端验证错误

问题： 错误在客户端验证不显示。此外，整个div类都没有设置。

我在做什么错？编号：添加了包装输入的表格。

来源

2015-12-21 Kamil Cierczek

首先，我相信你缺少在这个片段中的表单元素。你有一个表单，其中包含文本字段的'registerForm'的名称？如果你这样做，最好将它添加到片段中。 – asulaiman

您错过了封装输入字段的表单。角度验证是在表单级完成的，您不能验证独立输入字段（除非您使用ng-form指令 - https://docs.angularjs.org/api/ng/directive/ngForm）。当您使用具有与验证相关的正确名称的表单时，会出现验证错误。

Validated in this plunk

<div ng-class="{ 'has-success': (!error['login'] && submitted) || (registerForm.login.$touched && registerForm.login.$valid), 
'has-error': registerForm.login.$touched && registerForm.login.$invalid }" class="form-group"> 
<form name="registerForm"> 
    <label class="control-label" for="login">Username</label> 
    <input ng-model="registrationForm.login" type="text" id="login" class="form-control" name="login" required> 
</form> 
<p class="help-block" ng-show="registerForm.login.$invalid && registerForm.login.$touched">This field is required.</p>

来源

2015-12-21 16:48:05 asulaiman

嗨，我不好。这只是表单的一部分。我已经在一个名为“registerForm with a action”regiter（）的窗体中实现了所有输入，并在控制器的范围内实现。 –

在这种情况下，我无法再现您的问题。如果打开我张贴的plunk，您会注意到css类和ng-show在验证失败的情况下按预期工作。我已经更新了这个plunk以包含一个“有错误”的类风格来证明这一点。 – asulaiman

在angularjs中进行客户端验证

回答

相关问题