发表于: 2017-10-26 17:45:51
2 576
今天完成的事情:
修改了一下任务6的细节,重新写了一下登录页面。
学习了任务7的angular表单验证,angular双向绑定和添加点击按钮
明天计划的事情:
继续完成任务7,学习新知识点。
遇到的问题:
暂无
收获:
AngularJs表单校验(input):
1.必填项
验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可:
`<input type="text" required />
2. 最小长度
验证表单输入的文本长度是否大于某个最小值,在输入字段上使用AngularJS指令ng-minleng= “{number}”:
<input type="text" ng-minlength="5" />
3. 最大长度
验证表单输入的文本长度是否小于或等于某个最大值,在输入字段上使用AngularJS指令ng-maxlength=”{number}”: <input type="text" ng-maxlength="20" />
4. 模式匹配
使用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" />
AngularJS ng-model 指令用于绑定输入元素到模型中。
模型对象有两个属性: user 和 email。
使用了 ng-show指令, color:red 在用户名等用是$dirty 或 $invalid 才显示。
$pristine表示表单或者控件内容是否未输入过
$dirty 表示表单或控件内容是否已输入过
$valid 表示表单或控件内容是否已验证通过
$invalid 表示表单或控件内容是否未验证通过
$error 表示表单或控件内容验证时的错误提示信息
评论