AngularJS 表单验证

其实做的项目,表单验证不太多,但是会展现很多表格。

听了阿里懒懒交流会里面的AngularJS 表单验证,做个总结吧:

  1. 问题:

    数据绑定,遍历验证,错误信息显示,异步校验,拦截

  2. 令原生HTML5验证失效:

    form/ng-form novalidate

  3. 访问表单的属性:

    form-name.angular-property
    form-name.input-name.angular-property 
    
  4. 设置提交按钮的disabled属性

    <button ng-disabled="form.$invalid"></button>

    form不合法的时候禁掉

  5. 显示错误信息

    ng-show=”“

    想要红色 ng-class=”{‘has-error’: form.email.invaild && form.email.dirty}”

  6. 自定义的验证组件:

    写自定义指令

  7. 如何分别验证表单中每个输入项

    (ngForm——嵌套的表单)
    formName.fieldName.$valid

    a.每个fieldName分别在不同的formName中
    b.每个fieldName起个不同的名字

    ngModel.$addControl

  8. 不足:键盘处理,位置方式不够灵活,常用验证组件,大量相似的错误展示逻辑

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值