angularJs表单验证

最新推荐文章于 2020-12-23 03:03:54 发布

唯有学习使我沉迷

最新推荐文章于 2020-12-23 03:03:54 发布

阅读量579

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端学习

本文链接：https://blog.youkuaiyun.com/qq_38487698/article/details/86139482

前端学习专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍AngularJS中表单验证的功能与实现方法，包括如何使用formName.inputName.error.required来判断输入字段是否为空，以及如何在多个必填字段未填写时，利用focus函数将焦点定位到第一个未完成的输入框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

angularJs提供了很丰富的表单验证功能，当html页面中有表单时，angularJs会把form注入到 $s c o p e 中，比如 f o r m 表单中有一个 < i n p u t > 标签。 < i n p u t > 输入是必填的且是有效值。则可用以下的方式进行验证输入是否为空。 f o r m N a m e . i n p u t N a m e .$ invalid 若为true，则输入数据无效，false则相反。
formName.inputName. $e r r o r . r e q u i r e d 判断是否有输入，为 t r u e 则没有输入， f a l s e 为有输入。 f o r m N a m e .$ submited为true是则是提交时验证。
在这里插入图片描述

以上的图片实现了输入验证不能为空以及如果提交时为空择显示错误信息，验证不通过。

当很多必填信息没有填的时候提交表单如何让焦点聚焦到第一个没有填完整信息的输入框了，这个就是通过获取form表单中所有的必填输入框信息，判断哪些必填输入框内容为空或者数据无效，让后用focus函数聚焦就OK了。代码如下：
var focusInput = function(formId){
var _elements = $("#"+formId).find(’*[ng-required=“true”]’);
$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsn(){ if($ (this).is(’:visible’) && $(this).hasClass(“ng-invalid”)){
$(this).focus();
return false;
}
return true;
});
}