查看: 205|回复: 0

angular 课堂笔记 脏值检测 表单验证方式(指令)

发表于 2018-1-6 09:57:08
必填校验共同点不论是否输入过,都会对表单进行验证不同点1 Required h5提供的一个属性,因此有些浏览器会做额外的校验提示Ng-required ...
必填校验

共同点

不论是否输入过,都会对表单进行验证

不同点

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

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

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

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

共同点,

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

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

不同点

1 maxlength和minlength 是h5 属性,浏览器会特殊处理(maxlength:当超过最大长度时候,不允许我们继续输入)

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

正则验证:ng-pattern pattern

共同点

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

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

不同点

1   ng-pattern 他的值是标准正则表达式 /abc/

Pattern 他的值是一个正则表达式内容 abc

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

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

1 <div class="container" ng-controller="main">

2 <h1 class="text-center">注册系统</h1>

3 <form name="regist" class="form-horizontal container-fluid">

4 <div class="row form-group">

5 <div class="col-xs-4"><label for="user_name">用户名:</label></div>

6 <div class="col-xs-8">

7 <input id="user_name" name="username" type="text" ng-model="data.username" ng-maxlength="6" ng-minlength="4" required>

8 </div>

9 </div>

10 <div class="row form-group">

11 <div class="col-xs-4"><label for="tel">手机号:</label></div>

12 <div class="col-xs-8">

13 <input id="tel" type="text" name="tel" ng-model="data.tel" pattern="^1\d{10}$" required>

14 </div>

15 </div>

16 <div class="row form-group">

17 <div class="col-xs-4"><label for="address">地 址:</label></div>

18 <div class="col-xs-8">

19 <input id="address" type="text" name="address" ng-model="data.address" ng-required="true">

20 </div>

21 </div>

22 <div class="row form-group">

23 <div class="col-xs-4"><label for="email">邮 箱:</label></div>

24 <div class="col-xs-8">

25 <input id="email" type="text" name="email" ng-model="data.email" ng-pattern="/^\w+@\w+\.\w+$/" required="">

26 </div>

27 </div>
28 <div class="warning row">

29 <!-- 用户名必须输入过,并且不合法,才显示 -->

30 <p class="text-danger" ng-show="regist.username.$dirty && regist.username.$invalid">请正确输入用户名</p>

31 <p class="text-danger" ng-show="regist.tel.$dirty && regist.tel.$invalid">请输入1到11位数字</p>

32 <p class="text-danger" ng-show="regist.address.$dirty && regist.address.$invalid">这项是必填</p>

33 <p class="text-danger" ng-show="regist.email.$dirty && regist.email.$invalid">按照邮箱的格式填写</p>

34 <!-- 如果什么都没输入,直接提交,此时以上四项无法显示,此时显示该项 -->

35 <p class="text-danger" ng-show="showAllErr">请添加完整</p>

36 </div>

37 <div class="row submit-btn">

38 <button class="btn btn-success" ng-click="ckeck()">提交</button>

39 </div>

40 </form>

</div>

Ng-disabledNg-disabled 表单会变成灰色

True 表示不能操作

False 表示可以继续操作
Ng-readonlyNg-readonly 表单不变色

True 表示是只读的

False 表示可以操作的

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

他的只是样式的

1 <form name="myform">

2 <label for="">

3 用户名:

4 <input type="text" ng-disabled="isAbled">

5 </label>

6 <button ng-click="toggleInput()">toggle</button>

7 </form>
8
9 <form name="myform">

10 <label for="">

11 用户名:

12 <input type="text" ng-readonly="chouldReady">

13 </label>

14 <button ng-click="toggleInput()">toggle</button>

</form>

本文章版权归爱创课堂所有,转载请注明出处。

更多详细内容请访问爱创课堂官网首页

http://www.icketang.com/


相关热词搜索:[color=rgb(14, 98, 192) !important]课堂笔记
上一篇:angular 课堂笔记 脏值检测
下一篇:[url=]最后一页[/url]
延伸阅读:
  • ·爱创课堂前端培训 AngularJS angular简介(2017-11-02)
  • ·爱创课堂前端培训 AngularJS 多分支模板指令(2017-11-03)
  • ·爱创课堂前端培训 AngularJS 自定义指令(2017-11-03)
  • ·爱创课堂前端培训 AngularJs 自定义观察者模式服务(2017-11-06)
  • ·爱创课堂前端培训 AngularJs 项目实战(2017-11-06)



回复

使用道具 举报