发表于: 2017-04-27 21:50:08
1 1103
今天完成的事情:
检查任务9的代码,解决bug。
学习表单验证,给任务10添加表单验证。
明天计划的事情:
使用富文本,把富文本添加到代码中。
点击提交按钮,提交页面的内容到服务器。
遇到的问题:
其他的验证都做好了,但是图片的表单验证不知道该怎么写,写了<input type="file" name="img" accept="image/png,image/gif" name="file" id="file" ng-model="addimg" required>但是完全不起作用。
收获:
构建一个ng表单
1.确保form上标签有一个name属性,像下面的例子一样。最好再加一个novalidate=”novalidate”
2.form中不能有action属性。提交交由ng-submit处理
3.每个input一定要有ng-model,最好有一个name方便引用。然后用require或者ng-minlength之类才起作用
ng默认提供了验证
验证是否已输入文字,只需在标签上加上required:
<input type="text" ng-model="user.name" required />
验证至少输入{number}个字符,使用指令ng-minlength=“{number}”:
<input type="text" ng-model="user.name" ng-minlength="5" />
验证至多输入{number}个字符,使用指令ng-maxlength=“{number}”:
<input type="text" ng-model="user.name" ng-maxlength="20" />
确保输入匹配一个正则表达式,使用指令ng-pattern="/PATTERN/":
<input type="text" ng-model="user.name" ng-pattern="/a-zA-Z/" />
验证输入是一个Email,设置input的type属性为email:
<input type="email" name="email" ng-model="user.email" />
验证输入是一个数字,设置input的type属性为number:
<input type="number" name="number" ng-model="user.age" />
验证输入是一个URL,设置input的type属性为url
<input type="url" name="homepage" ng-model="user.weburl" />
未修改过的表单
布尔值属性,表示用户是否修改了表单。如果为ture,表示没有修改过;false表示修改过:
formName.inputFieldName.$pristine;
修改的表单
布尔型属性,当且仅当用户实际已经修改的表单。不管表单是否通过验证:
formName.inputFieldName.$dirty
经过验证的表单
布尔型属性,它指示表单是否通过验证。如果表单当前通过验证,他将为true:
formName.inputFieldName.$valid
未通过验证的表单
formName.inputFieldName.$invalid
错误
这是AngularJS提供的另外一个非常有用的属性:$error对象。它包含当前表单的所有验证内容,以及它们是否合法的信息。用下面的语法访问这个属性
formName.inputfieldName.$error
如果验证失败,这个属性的值为true;如果值为false,说明输入字段的值通过了验证。
$viewValue
$viewValue属性保存着更新视图所需的实际字符串。
$modelValue
$modelValue由数据模型持有。$modelValue和$viewValue可能是不同的,取决于$parser流水线是否对其进行了操作。
$parsers
$parsers的值是一个由函数组成的数组,当用户同控制器进行交互,并且ngModelController中的$setViewValue()方法被调用时,其中的函数在当用户同控制器进行交互,并且ngModelController中的$setViewValue()方法被调会以流水线的形式被逐一调用。ngModel从DOM中读取的值会被传入$parsers中的函数,并依次被其中的解析器处理。这是为了对值进行处理和修饰。
$formatters
$formatters的值是一个由函数组成的数组,其中的函数会以流水线的形式在数据模型的值发生变化时被逐一调用。它和$parser流水线互不影响,用来对值进行格式化和转换,以便在绑定了这个值的控件中显示。
$viewChangeListeners
$viewChangeListeners的值是一个由函数组成的数组,其中的函数会以流水线的形式在视图中的值发生变化时被逐一调用。通过$viewChangeListeners,可以在无需使用$watch的情况下实现类似的行为。由于返回值会被忽略,因此这些函数不需要返回值。
$error
$error对象中保存着没有通过验证的验证器名称以及对应的错误信息。
$pristine
$pristine的值是布尔型的,可以告诉我们用户是否对控件进行了修改。
$dirty
$dirty的值和$pristine相反,可以告诉我们用户是否和控件进行过交互。
$valid
$valid值可以告诉我们当前的控件中是否有错误。当有错误时值为false,没有错误时值为true。
$invalid
$invalid值可以告诉我们当前控件中是否存在至少一个错误,它的值和$valid相反。
评论