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

本例通过Angular框架来实现简单的表单验证一、html结构1、借助于bootstrap快速的编写了一个简

本例通过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才判断的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。