Angularjs表单/字段验证使用JavaScript函数，无需指令

Angularjs Form/Field validation using JavaScript function without directives

本文关键字：函数 指令 JavaScript 表单 字段 验证 Angularjs      更新时间：2023-09-26

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

  • 如果字段为空，我们应该显示"字段必须包含值"消息
  • 若字段包含字母数字字符，我们应该显示"字段只能包含数字"
  • 一个EVEN数字-消息给用户"值必须是一个偶数"

我想在对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

有人能提供建议吗？一个可行的例子就太好了。

我很惊讶没有人提到ui验证

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

没有比这更简单的了，它是PROPER AngularJS验证（不是愚蠢的手表）

这是一个工作演示

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

我知道这个问题很老了，我知道你不想要指令，但如果是"角度"方式，你可以考虑使用指令。。。这是我的角度验证。我在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。Oh和我还通过JSON外部文件支持多种本地化语言。我真的把我想要的所有可以想象的功能都添加到了一个疯狂的简单指令中。

当你只需要2行代码，甚至对于一个有5个验证器的输入，就不再需要10行代码用于1个输入的集群Form了（很抱歉，但总是觉得这有点极端）。不用担心表单不会失效，我也处理好了，它都是以良好的"角度"方式处理的。

看看我的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 上添加了一个实时演示

您可以尝试创建一个函数

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

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

相关文章：