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 相关文章推荐
splice slice区别
Oct 09 Javascript
JavaScript的面向对象(二)
Nov 09 Javascript
js对象的比较
Feb 26 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
小程序hover-class点击态效果实现
Feb 26 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 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
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
php面向对象重点知识分享
2019/09/27 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
js url传值中文乱码之解决之道
2009/11/20 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
python读文件逐行处理的示例代码分享
2013/12/27 Python
Python实现股市信息下载的方法
2015/06/15 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
2014社区三八妇女节活动方案
2014/03/30 职场文书
批评与自我批评总结
2014/10/17 职场文书
黄山导游词
2015/01/31 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript