angular实现表单验证及提交功能


Posted in Javascript onFebruary 01, 2017

本例通过Angular框架来实现简单的表单验证

一、html结构

1、借助于bootstrap快速的编写了一个简单的表单
代码主要部分如下: 

<div class="container" style="margin-top: 30px;" ng-controller="myCtrl">
  <h1 style="text-align: center">用户表单提交</h1>
  <form action="upload.js" class="form-horizontal" name="myForm">
    <div class="form-group">
      <label for="username" class="col-sm-3 control-label">用户名</label>
      <div class="col-sm-9">
        <input type="text" autocomplete="false" name="username" placeholder="用户名" ng-model="data.username" id="username" class="form-control" required>
        <div class="alert alert-danger help-block" >
          用户名长度不能小于5位
        </div>
        <div class="alert alert-danger help-block" >
          用户名长度不能大于15位
        </div>
      </div>
    </div>
  </form>
 </div>

2、表单验证常见问题及指令

1)、问题:
》如何绑定数据——双向绑定
》验证表单——正则表达式
》显示错误信息
》整个Form的验证
》避免提交没通过验证的表单
》防止多次提交
2)、常用指令
》指令:
ng-model,ng-required,ng-pattern,ng-maxlength,ng-minlength,ng-change
》样式:
ng-valid,ng-invalid,ng-pristine,ng-dirty
》form控制变量
formName.inputFieldName.$error:字段错误信息
formName.inputFieldName.$dirty:字段是否修改
formName.inputFieldName.$pristine:字段是否是初始状态
formName.inputFieldName.$valid:字段是否有效
formName.inputFieldName.$invalid:字段是否无效

二、功能实现

2.1 用户名验证
用户输入用户名字段验证主要是长度验证,以及是否必须

1、ng-model绑定表单数据,以便使用angular的验证api
2、ng-minlength,ng-maxlength规定字段长段,required规定字段必填
3、错误提示信息通过formName.inputFieldName.$error.minlength/maxlength决定是否要显示,当输入不合法时,$error对应的错误信息会为true
如下:

<div class="form-group">
    <label for="username" class="col-sm-3 control-label">用户名</label>
    <div class="col-sm-9">
      <input type="text" autocomplete="false" name="username" placeholder="用户名" ng-model="data.username" id="username" ng-minlength="5" ng-maxlength="15" class="form-control" required>
      <div class="alert alert-danger help-block" ng-show="myForm.username.$error.minlength">
        用户名长度不能小于5位
      </div>
      <div class="alert alert-danger help-block" ng-show="myForm.username.$error.maxlength">
        用户名长度不能大于15位
      </div>
    </div>
  </div>

2.2 密码确认验证

用户密码确认验证需要保证两次输入的密码一致,且在未输入确认密码前不验证

1、绑定数据ng-model=data.pwdConfirm(所有表单数据都保存到data对象中)
2、通过判断data.pwdConfirm!==data.password确定两次密码是否输入一致
3、通过formName.inputField.$dirty确定此项是否填写过

<div class="form-group">
    <label class="col-sm-3 control-label">确认密码</label>
    <div class="col-sm-9">
      <input type="password" name="pwdConfirm" ng-model="data.pwdConfirm" placeholder="确认密码" id="pwdConfirm" required class="form-control">
      <div class="alert alert-danger" ng-show="data.pwdConfirm!==data.password&&myForm.pwd.$dirty">
        两次输入的密码不一致
      </div>
    </div>
  </div>

2.3 邮箱验证

邮箱验证主要验证邮箱格式是否正确,字段长度

1、使用H5中新增type属性值email作为
2、通过ng-pattern指令定义邮箱验证的正则
3、邮箱验证常用正则表达式:^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+
4、通过myForm.email.$error.pattern验证邮箱格式是否正确

<div class="form-group">
    <label class="col-sm-3 control-label">邮箱</label>
    <div class="col-sm-9">
      <input type="email" name="email" ng-model="data.email" placeholder="邮箱" class="form-control" required ng-pattern="/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/">
      <div class="alert alert-danger help-block" ng-show="myForm.email.$error.minlength">
        邮箱长度不能小于5位
      </div>
      <div class="alert alert-danger help-block" ng-show="myForm.email.$error.pattern">
        请填写正确的邮箱格式
      </div>
      <div class="alert alert-danger help-block" ng-show="myForm.email.$error.maxlength">
        邮箱长度不能大于30位
      </div>
    </div>
  </div>

2.4 单复选框

单复选框主要确定数据绑定问题,以及复选框的数据渲染
1、通过以data对象的属性形式来绑定数据
2、多选的选项值通过ng-repeat进行遍历
3、设置value值以便提交时对值进行区分

<div class="form-group">
    <label class="col-sm-3 control-label">性别</label>
     <div class="col-sm-9">
       <label class="radio-inline">
         <input type="radio" name="sex" value="1" ng-model="data.sex" />男
       </label>
       <label class="radio-inline">
         <input type="radio" name="sex" value="0" ng-model="data.sex" />女
       </label>
     </div>
  </div>
   <div class="form-group">
    <label class="col-sm-3 control-label">爱好</label>
     <div class="col-sm-9">
       <label class="radio-inline" ng-repeat="hobby in hobbies">
         <input type="checkbox" name="hobby" ng-model="hobbiesC" value="{{hobby.id}}" /> {{hobby.name}}
       </label>
     </div>
  </div>
  <div class="col-sm-9 col-sm-offset-3">
    <input type="reset" class=" btn btn-danger" value="重置">
    <input type="submit" class="btn btn-primary " value="提交">
  </div>

2.5 城市二级联动

1、城市数据定义:每个城市对象包括id,parent,name属性,id为每个城市省份独有,parent是根据父级省份或城市而定
2、通过ng-options指令来遍历出城市数据

2.5.1 城市数据模型

通过\$scope.cities定义数据模型

$scope.cities=[
    {
      id:1,
      parent:0,
      name:'四川省'
    },
    {
      id:2,
      parent:1,
      name:'成都市'
    },
    ...
  ]

2.5.2 html中渲染城市数据

通过ng-options指令和ng-model指令遍历数据和设置默认值

<div class="form-group">
    <label class="col-sm-3 control-label">出生地</label>
     <div class="col-sm-3">
       <select name="birthAddress" id="" ng-model="data.province" ng-options="c.id as c.name for c in cities">
         <option value="">-- 请选择 --</option>
       </select>
     </div>
  </div>

说明:
1、ng-options=”obj.name for obj in datas” 常见用法,通过 obj.id as obj.name设置option标签的value值为id,内容为name
2、ng-model可用于设置select的默认值
2.5.3 定义过滤器用于过滤省份,城市等

.filter("cityFilter",function(){
  return function(input,parent){
    var filtedData=[];
    angular.forEach(input,function(value,key){
      if(value.parent===parent){
        filtedData.push(value)
      }
    })
    return filtedData;
  }
})

说明:
1、如上通过定义cityFilter,传入一个parent作为参数,遍历传入的数据,并宽判断是否与传入的parent相等来确定当前城市是哪一级
2、返回的filtedData即是过滤结果。
3、用到了angular.forEach(obj,fn)迭代器,其中fn有三个参数传入,分别是value,key,obj;value即为当前遍历出的对象,key为遍历的唯一标识,obj为被遍历的数组或对象本身。
使用(省份): ng-options="c.id as c.name for c in cities|cityFilter:0"

2)、城市对应选择
1、根据data.province作为过滤参数,进行城市筛选
2、区域的选择同理,可设置当选择了城市后,再出现区域选项框(ng-show指令)

<div class="col-sm-2">
    <select name="birthC" ng-model="data.cities" ng-options="c.id as c.name for c in cities|cityFilter:data.province">
      <option value="">-- 请选择 --</option>
    </select>
  </div>
  <div class="col-sm-2" ng-show="!myForm.birthC.$pristine">
    <select name="birthD" ng-model="data.district" ng-options="c.id as c.name for c in cities|cityFilter:data.cities">
      <option value="">-- 请选择 --</option>
    </select>
  </div>

2.6 表单提交

1、功能需求:当表单验证不通过时,使提交按钮失效(ng-disabled),

html结构:

<div class="col-sm-9 col-sm-offset-3">
    <input type="reset" class=" btn btn-danger" value="重置" ng-click="reset()">
    <input type="submit" class="btn btn-primary " value="提交" ng-disabled="myForm.$invalid">
  </div>

js:

$scope.reset=function(){
    $scope.myForm.$setPristine();
  }

注:表单中有一个$setPristine()方法将表单复位原始状态,class,$dirty,$pristine会恢复原始状态。但注意表单的错误信息$error并不会被隐藏,所以在验证表单时,记得在每一项错误信息都是由$dirty才判断的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 Javascript
Vue响应式原理详解
Apr 18 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
react-native fetch的具体使用方法
Nov 01 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 #Javascript
Javascript基础回顾之(二) js作用域
Jan 31 #Javascript
Javascript基础回顾之(一) 类型
Jan 31 #Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 #Javascript
AngularJS报错$apply already in progress的解决方法分析
Jan 30 #Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 #Javascript
JavaScript Date 知识浅析
Jan 29 #Javascript
You might like
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
php Session无效分析资料整理
2016/11/29 PHP
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
AngularJS入门之动画
2016/07/27 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
python如何编写win程序
2020/06/08 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
django rest framework 过滤时间操作
2020/07/12 Python
python 实现&quot;神经衰弱&quot;翻牌游戏
2020/11/09 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
EJB的角色和三个对象
2015/12/31 面试题
医院护士的求职信范文
2013/12/26 职场文书
成语的广告词
2014/03/19 职场文书
小学老师寄语大全
2014/04/04 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
公司职员入党自传书
2015/06/26 职场文书
运动会开幕式主持词
2015/07/01 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android