Angular学习笔记(3)

脏值检测

就是对表单验证

以前用jQuery对页面中表单元素做验证

绑定事件(表单元素)focus,blur,keydown,keyup,change,click等等

在事件回调函数中获取需要验证的表单

对表单内容做验证处理(正则)

根据结果显示提示

根据结果显隐提示

提交表单时候我们还会对数据进行拼接(ajax)

在Angular中作表单验证只需要添加几个指令即可

在创建表单的时候,Angular会根据(form,input等等)标签的name属性在作用域中创建一个变量

input表单的name属性定义在form元素的name属性对应的变量内部

在作用域中第一次是根据form标签寻找name属性并映射变量(第一次不会根据input等做表单映射)

第二次会在form表单中遍历表单元素并映射到表单变量中

无论是表单form元素还是input元素对应的变量都有四个属性

$dirty是否被修改过

True已经被修改过

False没有被修改过

$pristine是否被修改过

True没有被修改过

False已经被修改过

$valid是否合法

True合法

False不合法

$invalid是否合法

True不合法

False合法

(input在使用时一定要绑定ng-model不然会找不到input变量)

表单中$dirty表示表单是否被修改过(true表示修改过)$pristine表示表单是否未被修改过(true表示未被修改过它与$dirty是一对属性)

$invalid表示在表单验证中input是否不合法(true表示不合法false表示合法)$valid表示是否合法(true表示合法)

HTML5小记:

在HTML5中给表单提供了多个新增属性这些新增属性在一些浏览器上已经实现

HTML5新增input在表单中的属性required表示该字段为必填项如,

<form name="myform">
    <label for="">用户名:<input type="text" name="username" ng-model="uname" required></label>
    <div><button ng-click="check()">提交</button></div>
    </form>

此处效果为HTML5实现的

HTML5还提供minlength与maxlength来判断字段长度

使用时<input minlength="2" maxlength="6"></input>

则最高输入6位数据不能输入第七位数据

同时这三个HTML5属性也可以使用Angular中定义的来实现即ng-minlength还有ng-maxlength以及ng-required

在使用ng-required时需要加上true即,ng-required=“true”

但是使用Angular定义最大长度时数据是可以超出最大长度的但是会根据自己写的js逻辑出现提示符

其中required原声HTML5的指令比较好使

表单验证方式(指令)

必填校验

共同点

无论是否输入都会对表单进行验证

不同点

1. Required  h5提供的一个属性,因此有一些浏览器会做额外的校验提示

Ng-required  Angular的一个指令不会影响浏览器的校验(浏览器校验捕获不到这个指令)

2. Ng-required必须传递一个属性值(true),required属性不用

最大长度校验和最小长度校验

共同点,

1.都是根据属性值做长度的校验

2.只在输入的时候做校验,不会在未输入($dirty=false)情况下做校验(此时$invalid=true)

不同点

1. maxlength和minlength是h5的属性,浏览器会特殊处理(maxlength,当超过最大长度的时候,

不允许继续输入)

2. Ng-maxlength和ng-minlength是指令,不会影响浏览器

正则验证:ng-pattern    pattern

共同点

1. 都是根据正则表达式做校验

2. 他们都只在输入的时候做校验,未输入($dirty=false)的时候不会做校验(此时$invalid=true)

不同点

1. ng-pattern 它的值是标准正则表达式(/abc/)

Pattern  它的值是一个正则表达式内容(abc)

2. pattern使用时候,一些浏览器会做校验

ng-pattern使用的时候,浏览器不会做校验

Ng-disabled  表单会变灰色

True表示不能操作

False表示可以操作

Ng-readonly 表单不会变色

True表示只读

False表示不可操作

ng-disabled和ng-readonly的锁死样式不同

ng-disabled和ng-readonly都可以同时表单元素什么时候可以操作,什么时候不可以操作

他们只是样式不同

定义按钮时ng-click的名称不要与ng-disabled=“”中的名称相同否则不会出现效果(ng-readonly也是一样)。

ng-checked

表示是否被选中

True表示被选中

False表示没有被选中

Ng-model绑定的数据值只能是布尔值,设置value或者true-valueshimeiyo

猜你喜欢

转载自blog.csdn.net/qq_31404603/article/details/53162457
今日推荐