AngularJS校验用户输入

阅读更多

        Angular自动为

元素增加了一些很好用的特性,使其更适合开发单页面应用。其中一个特性是,Angular允许你为表单中的输入元素定义一个合法的状态,并且只有当所有元素是合法状态时才允许提交表单。

        例如,创建一个新用户注册表单,要求必须输入用户名和邮件地址,但是年龄字段是可选的,在这些字段被提交到服务器之前我们可以校验这几个输入项。

        利用Angular的扩展以及大量的输入元素,我们可以在模板中实现以上效果,示例如下:


	form实例


	

Sign Up

{{message}}
First name:
Last name:
Email:
Age:

运行结果:
AngularJS校验用户输入_第1张图片
输入完成后,Submit按钮可点击
AngularJS校验用户输入_第2张图片

点击后页面如下:
AngularJS校验用户输入_第3张图片

        注意,我们使用了HTML5的required属性以及email和number两种输入类型,用来校验其中的一些字段。这一机制在Angular中工作得很好,而对于那些老式的不支持HTML5的浏览器来说,Angular会自动使用指令来适配,从而实现相同的功能。

        在控制器中,我们可以通过$valid属性获取表单的校验状态。当表单中的所有输入项都合法时,Angular将会把这个属性设置为true。我们可以使用$valid属性来做很多很炫的事情,例如当表单没有输入完成时可以禁用Submit按钮。如上实例,我们在Submit按钮上添加一个ng-disabled指令,从而避免提交非法状态的表单。

 

资料来源:《用AngularJS开发下一代Web应用》

  • AngularJS校验用户输入_第4张图片
  • 大小: 8.5 KB
  • AngularJS校验用户输入_第5张图片
  • 大小: 10.5 KB
  • AngularJS校验用户输入_第6张图片
  • 大小: 11.3 KB
  • 查看图片附件

你可能感兴趣的:(javaScript,AngularJS,form)