`

angularjs之表单验证一

阅读更多
<form name="myForm" novalidate>
		<div>
		<input   ng-pattern="/^\d{3}$/" name="name" required  ng-minlength="3" maxlength="3" ng-model="user.name" />
		<span class="error" ng-show="myForm.name.$dirty&&myForm.name.$invalid">请输入3位数字</span>
		<span class="error" ng-show="jscontrol&&myForm.name.$pristine&&myForm.name.$error.required">请输入3位数字</span>
		</div>
		<div>
		<input   ng-pattern="/^.{1,15}$/" name="addr" required  ng-minlength="1" maxlength="15" ng-model="user.addr" />
		<span class="error" ng-show="myForm.addr.$dirty&&myForm.addr.$invalid">请输入15位任意字符</span>
		<span class="error" ng-show="jscontrol&&myForm.addr.$pristine&&myForm.addr.$error.required">请输入15位任意字符</span>
		</div>
		<button ng-click="save();">提交</button>

	</form>

 

app.controller('formCtrl', ['$scope', function($scope){
	$scope.save = function(){
		$scope.jscontrol=true;
		if($scope.myForm.$valid){
			alert("合法");
		}else{
			alert("不合法");
		}
	}
}])

 简洁的原生的表单验证

分享到:
评论

相关推荐

    使用angularJS完成表单验证

    使用angularJS完成表单验证功能

    AngularJS表单验证

    在AngularJS中,表单验证是一项关键功能,它允许开发者实时检查用户输入的数据,确保其符合预期的格式和规则,从而提高用户体验并减少服务器端的压力。AngularJS的表单验证机制是基于模型驱动的,这使得它在处理复杂...

    AngularJS实现表单验证

    AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。在AngularJS中,有许多表单验证指令。在这里,我们将谈谈几个最流行指令,然后我们将讨论如何编写自定义的验证。

    基于angularJS移动端表单验证效果

    在移动应用开发中,前端表单验证是必不可少的一部分,它能确保用户输入的数据符合预期,减少服务器负担,提升用户体验。AngularJS,作为一个强大的MVC框架,提供了强大的数据绑定和指令系统,非常适合构建复杂的...

    angularjs表单验证Demo

    AngularJS是前端开发流行框架,本Demo展示了表单验证的意义,及实现方法,掌握Angular基础指令,通过不同的指令元素可以拥有不同功能,并通过指令与表单合作验证,从而实现表单验证的敏捷化开发。

    Angularjs2表单+验证

    3. **表单验证**: - AngularJS2支持客户端验证,即在用户提交表单之前检查输入是否有效。 - 控制器级别的验证通过在FormControl对象上应用验证器实现,例如`formControlName.control.setValidators(Validators....

    AngularJS自定义表单验证功能实例详解

    本文实例讲述了AngularJS自定义表单验证功能。分享给大家供大家参考,具体如下: Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox),也实现了很多指令做为验证...

    AngularJS表单和输入验证实例

    AngularJS提供了强大的表单验证功能,可以在客户端进行数据验证,提高用户体验并减少无效数据提交到服务器。 AngularJS表单可以使用HTML原生的表单和控件,比如`&lt;input&gt;`、`&lt;select&gt;`、`&lt;button&gt;`和`&lt;textarea&gt;`等...

    AngularJs demo 例子(表单验证) form

    在AngularJS中,表单验证是一个至关重要的部分,它能够帮助开发者在用户提交数据之前进行实时验证,提高用户体验并确保数据的准确性。本示例以"AngularJs demo 例子(表单验证)form"为主题,结合bootstrap美化,...

    详解AngularJS实现表单验证

    开始学习AngularJS表单验证: 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下:&lt;&lt;input type=”text” required /&gt;  2....

    AngularJS 学习笔记(表单验证篇)

    提供的压缩包文件可能包含一个Eclipse工程,方便开发者在IDE中编辑和运行代码,同时也可以直接在浏览器中查看运行结果,这对于学习和调试AngularJS表单验证功能非常有用。 通过学习和实践这些知识点,你将能够熟练...

    AngularJS手动表单验证

    首先,我们需要了解AngularJS表单验证的两个基本概念:novalidate属性和表单的name属性。在HTML5中,form元素可以添加一个novalidate属性,用来告诉浏览器不要使用默认的表单验证功能。这对于AngularJS来说至关重要...

    AngularJS实现表单验证功能详解

    AngularJS实现表单验证功能是前端开发中十分重要的一个环节,它能保证用户输入的数据符合预期的格式和规则。表单验证不仅提升了用户体验,也是保证数据质量和安全的有效手段。在AngularJS框架中,通过内置的表单验证...

    AngularJS自动表单验证

    在AngularJS中,表单验证是确保用户输入符合预设规则的关键功能,它有助于提高用户体验并确保数据的准确性。AngularJS提供了两种表单验证方式:手动验证和自动验证。本文将详细探讨自动验证机制,特别是如何利用...

    基于AngularJS实现表单验证功能

    在实现AngularJS表单验证时,可以定义自定义验证函数来满足特定的验证需求。自定义验证器通过返回 true 或 false 来决定表单是否通过验证。另外,AngularJS还提供了校验消息提示,当验证不通过时,可以在视图中显示...

    AngularJS学习笔记之表单验证功能实例详解

    在上述提供的示例代码中,我们可以看到以下几点关于AngularJS表单验证的关键知识点: 1. 表单元素上使用`name`属性。这是创建模型控制器(`ng-model`)和视图之间的联系所必需的。通过为每个需要验证的元素提供一个...

    Angularjs 动态添加表单

    在AngularJS中,`ngForm`指令可以创建一个表单控制器,这个控制器可以用来管理表单的状态,如验证、提交等。当我们动态添加表单字段时,需要确保新添加的字段也被纳入到表单控制器的管理范围,以便进行有效的验证和...

    基于angularJS的表单验证指令介绍

    但是通过这些片段,我们仍然可以对AngularJS表单验证指令的实现逻辑有一个大致的了解。 此外,在实际开发中,通常还需要考虑表单验证的用户体验问题,例如通过动画、颜色变化等方式来提示用户输入的正确与否,以及...

    AngularJS实现表单手动验证和表单自动验证

    自动验证是AngularJS表单验证中的另一种方式。AngularJS利用HTML5的表单验证特性,如required、pattern、min、max等,自动地对表单元素进行验证,无需开发者编写额外的验证逻辑代码。 当表单元素符合HTML5验证要求...

Global site tag (gtag.js) - Google Analytics