能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的。在人与人沟通的语境中,表单验证给出来的反馈同获得正确输入同等重要。
表单验证不仅能给用户提供有用的反馈,同时也能保护我们的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 :