10

有没有一种方法可以在不使用指令的情况下以角度验证字段？例如：我想对输入字段进行以下验证。

  • 如果字段为空，我们应该显示“字段必须包含值”消息。
  • 如果字段包含字母数字字符，我们应该显示“字段只能包含数字”。
  • 偶数 - 给用户的消息“值必须是偶数”。

我想在调用 JavaScript 函数时进行以下验证。

我四处搜索，发现有一种方法可以使用 ng-valid 和 $error ，但是我没有设法让它工作。

下面的代码是根据我得到的答案之一：

<div ng-app>
<form name='theForm' novalidate>
    <input type='text' name='theText' ng-model='theText' ng-pattern='/^[0-9]+$/'/>
    <span ng-show='theForm.theText.$error.pattern'>Field can contain only digits</span>
    <span ng-show='theText.length<1'>Field must contain a value</span>
    <span ng-show='theText%2!=0&&document.getElementsByName("theText").value!=""&&!theForm.theText.$error.pattern&&!theForm.theText.$pristine'>Value must be an even number</span>
    <br/><input type='submit' value='Submit' />
</form>

我想将最后一个 [span] 中的内容放入 JavaScript 函数中，以使其更通用，并最终在条件发生变化时仅更改 JS 而不是 HTML

有人可以建议吗？一个工作的例子会很棒。

4

4 回答 4

22

我很惊讶没有人提到ui-validate

$scope.isOdd = function($value){
  return $value % 2;
}
...
<form name="myform">
  <input ng-model="myVal" name="value" required
    ng-pattern="/^[0-9]*$/" ui-validate=" 'isOdd($value)' "></input>
  <pre>{{myform.value.$error|json}}</pre>
</form>

没有比这更简单的了，它是正确的 AngularJS 验证（不是傻手表）

这是一个工作演示

于 2013-08-08T18:43:49.327 回答
3

查看 angularjs 表单文档 - http://docs.angularjs.org/guide/forms。通常，它基于 HTML5 属性，例如 required、min、max 等。

例如，要完成您的第一个要求 - “一个空字段应该显示“字段必须包含一个值”消息，你会做这样的事情：

<input type="text" ng-model="user.name" name="uName" required /><br />
<div ng-show="form.uName.$invalid">
  <span ng-show="form.uName.$error.required">Field must contain a value.</span>
</div>

对于仅限数字的字段，您可以将pattern属性与匹配的正则表达式一起使用（例如：http ://www.wufoo.com/html5/attributes/10-pattern.html ）。

对于偶数验证，我不确定 - 我认为您必须为此进行自定义验证（这意味着您必须创建一个指令）或pattern以某种方式使用该属性。

最后但并非最不重要的 - 记得添加novalidate到<form>标签。否则浏览器也会尝试验证您的字段，而您不希望这样：

<form ... novalidate>
 ...
</form>
于 2013-08-08T12:23:32.287 回答
3

我知道这个问题很老，我知道你不想要一个指令，但如果它是“Angular”方式，你可以考虑使用一个指令......好吧，这是我的Angular-Validation。我在 Github 上做了一个项目，我认为它与任何可用/可用的东西相比简直太棒了......我基于优秀的 Laravel PHP 框架并使其在 Angular 下可用......这太简单了，你需要2行1 行代码，1 行输入，1 行错误显示，就是这样......永远不会多，永远不会少！话不多说，我们举几个例子：

<!-- example 1 -->
<label for="input1">Email</label>
<input type="text" validation="email|min_len:3|max_len:25|required" ng-model="form1.input1" name="input1" />

<!-- example 2 -->
<label for="input2">Alphanumeric + Exact(3) + required</label>
<input type="text" validation="alpha|exact_len:3|required" ng-model="form1.input2" name="input2" />

所以我可以在一个简单的指令中定义我想要的任何数量的验证规则（已经有 25 种以上的验证器），validation="min_len:2|max_len:10|required|integer"并且错误消息将始终显示在下一个<span>你们不喜欢它了吗？1 行代码用于输入，1 行代码用于错误显示，你不能比这更简单......哦，如果你想添加，我什至支持你的自定义 Regex。另一个好处，我也支持你想要的任何触发事件，最常见的可能是onblur和onkeyup。哦，我还通过 JSON 外部文件支持多种本地化语言。我真的将我想要的所有可以想象的功能添加到 1 个疯狂的简单指令中。

当您唯一需要的是 2 行代码时，不再需要 10 行代码用于 1 个输入（对不起，但总是发现这有点极端）的集群表单，即使对于带有 5 个验证器的输入也是如此。不用担心表格不会变得无效，我也处理好了，这一切都以良好的“Angular”方式处理。

看看我的 Github 项目Angular-Validation ...我相信你会喜欢它 =)

更新
另一个糖果奖励！为了使用户体验更加流畅，我添加了计时器验证。这个概念很简单，不要在用户打字时打扰用户，但要验证他是否暂停或更改输入（onBlur）......喜欢它！
您甚至可以根据自己的喜好自定义计时器，我决定在指令中将其默认为 1 秒，但如果您想自定义，您可以调用例如typing-limit="5000"5 秒。暂停。完整示例：

<input type="text" ng-model="form1.input1" typing-limit="5000" validation="integer|required" name="input1" />
<span class="validation text-danger"></span>


更新 #2
还添加了输入匹配确认验证（例如：密码确认），这是一个示例代码

<!-- input match confirmation, as for example: password confirmation -->
<label for="input4">Password</label>
<input type="password" name="input4" ng-model="form1.input4" validation="alpha|min_len:4|required"  />
<label for="input4c">Password Confirmation</label>
<input type="password" name="input4c" ng-model="form1.input4c" validation="match:form1.input4,Password|required"  />

更新#3
重构了指令，因此<span>不需要显示错误的要求，指令现在自行处理它，请参阅顶部反映的代码更改。

DEMO在Plunker
上添加了现场演示

于 2014-02-09T05:11:12.073 回答
2

那么你可以尝试创建一个函数

<span ng-show='isEven(theText)'>Value must be an even number</span>

$scope.isEven=function(data) {
    if(data) {
        return data%2===0
    }
    return true;
}

该方法既可以在当前控制器作用域上定义，也可以在 $rootScope 上定义。

不是一种非常有角度的方式，因为指令会更好，但我认为它会起作用。

于 2013-08-08T13:14:49.553 回答