当前位置: 首页 > 面试题库 >

使用不带指令的JavaScript函数进行Angularjs表单/字段验证

公孙森
2023-03-14
问题内容

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

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

我想在对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-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验证(不是傻瓜手表)

这是一个工作演示



 类似资料:
  • 问题内容: 尝试将指令添加到具有动态ID的输入时,链接方法未正确绑定到该对象。给定以下jsfiddle或html: 和js: 我在控制台调试器上看到的是,当链接被调用时,其ID实际上显示为“ datepicker-{{{id}}””而不是“ datepicker-7”。 有办法强迫这种情况发生吗?实施此方法的更好方法? 更新 :应该已经澄清。单击日期选择器会显示出来,但是单击日期不起作用。我收到错

  • 本文向大家介绍AngularJS使用angular-formly进行表单验证,包括了AngularJS使用angular-formly进行表单验证的使用技巧和注意事项,需要的朋友参考一下 当验证表单中有很多字段时,这时候可能希望把html的生成以及验证逻辑放到controller中,在页面,也许是这样的: 然后,在controller中定义各个字段以及验证。angular-formly就是为这个需

  • 问题内容: 我有一个已定义的AngularJS指令。我正在尝试与Jasmine进行单元测试。 根据此建议,我的JasmineJavaScript如下所示: 当我在Jasmine spec错误中运行此命令时,出现以下错误: 我想要的只是让templateUrl原样加载- 我不想使用。我相信这可能与使用ngMock而不是ngMockE2E有关。如果是罪魁祸首,如何使用后者而不是前者? 提前致谢! 问题

  • 问题内容: 我在AngularJS应用程序中创建了一个指令,该指令在我的应用程序中生成样式输入。看起来像这样: 它的模板是: 调用很简单: 我想为此字段创建验证,并添加了错误信息: 而showError是: 基本上,它是从《用AngularJS掌握Web应用程序开发》一书中复制的。我有一个问题,因为当我在控制台中登录表单时,我的名字是,而不是name属性,这里的值应该是“ name”。我究竟做错了

  • 问题内容: 我正在尝试验证从后端端点给我的一些表单字段… 因此基本上,元素是在内动态创建的。因此,属性也被动态添加,如,等… 但是,由于该属性是动态添加的,因此当我尝试验证它时,例如: 它不返回任何内容,因为在这一点上,它不知道是什么。 我创建了一个jsFiddle来演示该问题:http : //jsfiddle.net/peduarte/HB7LU/1889/ 任何帮助或建议将不胜感激! FAN

  • 问题内容: 我正在尝试在指令中的元素上使用。我发现的所有示例似乎都在控制器上进行了设置… 我在表单验证上派了一个JS小提琴,并尝试了很多方法。任何见解将不胜感激:http : //jsfiddle.net/thomporter/pmKpG/2/ 在小提琴中,在控制器上调用: 我想做类似的事情: 这样我就可以执行以下操作: 问题答案: 我想通了…您必须在输入元素上有一个名称。添加名称后,错误会根据需