Is it ready to start? 准备好开始了吗? 那就与我们取得联系吧!

有一个互联网项目想和我们谈谈吗?您可以填写右边的表格,让我们了解您的项目需求,这是一个良好的开始,我们将会尽快与你取得联系。当然也欢迎您给我们写信或是打电话,让我们听到你的声音!

Network marketing 弘优网络网络营销 项目直线:023-89035099 / 18523479981 电子邮箱: [email protected] 公司地址:重庆市渝中区大坪正街160号万科中心4栋34-12

合作意向表

您需要的服务

您最关注的地方

预算

看不清?点击更换
关闭
  • 重庆资深网络营销外包机构
  • 多即是少,少即是多
  • 没有最好只有最适合,最适合即最优
  • 人无信不立,事无信不成,商无信不兴
023-89035099
您的位置: 弘优 > 头条 > 行业新闻 >

AngularJs表单验证

发布时间:2017-10-18 来源:弘优网络 字号:

  Anjularjs表单验证

  能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的。在人与人沟通的语境中,表单验证给出来的反馈同获得正确输入同等重要。

  表单验证不仅能给用户提供有用的反馈,同时也能保护我们的Web应用不会被恶意或者错误的输入所破坏。我们要在Web前端尽力保护后端。

  AngularJS能够将HTML5表单验证功能同它自己的验证指令结合起来使用,并且非常方便。AngularJS提供了很多表单验证指令。
 

<form name="form" novalidate>
	<label name="email">Your email</label>
	<input type="email" name="email" ng-model="email" placeholder="Email Address"/>
</form>

  要使用表单验证,首先要确保表单像上面的例子一样有一个 name 属性。

  所有输入字段都可以进行基本的验证,比如最大、最小长度等。这些功能是由新的HTML5表单属性提供的。

  如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加 novalidate 标记

  1. 必填项 required 

  验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记 required 即可:注释:required 属性适用于以下 <input> 类型:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file

<input type="text" required />

  2. 最小长度 ng-minleng="{number}"

  验证表单输入的文本长度是否大于某个最小值,在输入字段上使用AngularJS指令 ng-minleng="{number}" :

<input type="text" ng-minlength="5" />

  3. 最大长度 ng-maxlength="{number}" 

  验证表单输入的文本长度是否小于或等于某个最大值,在输入字段上使用AngularJS指令 ng-maxlength="{number}" :

<input type="text" ng-maxlength="20" />

  4. 模式匹配  ng-pattern="/PATTERN/"

  使用 ng-pattern="/PATTERN/" 来确保输入能够匹配指定的正则表达式:

<input type="text" ng-pattern="[a-zA-Z]" />

  5. 电子邮件

  验证输入内容是否是电子邮件,只要像下面这样将 input 的类型设置为 email 即可:

<input type="email" name="email" ng-model="user.email" />

  6. 数字

  验证输入内容是否是数字,将 input 的类型设置为 number :

<input type="number" name="age" ng-model="user.age" />

  7. URL

  验证输入内容是否是URL,将 input 的类型设置为 url :

<input type="url" name="homepage" ng-model="user.facebook_url" />

  在表单中控制变量

  表单的属性可以在其所属的 $scope 对象中访问到,而我们又可以访问 $scope 对象,因此JavaScript可以间接地访问DOM中的表单属性。借助这些属性,我们可以对表单做出实时(和AngularJS中其他东西一样)响应。这些属性包括下面这些。(注意,可以使用下面的格式访问这些属性。)

  formName.inputFieldName.property
 

  ■未修改的表单

  这是一个布尔属性,用来判断用户是否修改了表单。如果未修改,值为 true ,如果修改过值为 false

文章标签: Angular(1)