Angularjs表单/字段验证使用没有指令的JavaScript函数

Question

有没有办法在角度验证字段不使用指令？ 例如：我想对输入字段进行以下验证。

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

我想在调用 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

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

Answer 1

我很惊讶没有人提到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 验证（不是愚蠢的手表）

Here's a working demo

Answer 2

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

Answer 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" />

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

不再需要 10 行代码用于 1 个输入的集群表单（抱歉，但总是发现这有点极端）当您唯一需要的是 2 行，不再需要，即使对于带有 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> 来显示错误，指令现在自己处理它，请参阅顶部反映的代码更改。

演示
在Plunker添加了一个现场演示

Answer 4

你可以尝试创建一个函数

<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 上定义。

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