AngularJS表单验证功能

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

  表单验证不仅能给用户提供有用的反馈,同时也能保护我们的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 :

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/1199.html