本例通过Angular框架来实现简单的表单验证
创新互联公司专注于企业成都营销网站建设、网站重做改版、乐至网站定制设计、自适应品牌网站建设、HTML5、商城网站制作、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为乐至等各大城市提供网站开发制作服务。
一、html结构
1、借助于bootstrap快速的编写了一个简单的表单
代码主要部分如下：
用户表单提交
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
如下：
用户名长度不能小于5位用户名长度不能大于15位
2.2 密码确认验证
用户密码确认验证需要保证两次输入的密码一致，且在未输入确认密码前不验证
1、绑定数据ng-model=data.pwdConfirm（所有表单数据都保存到data对象中）
2、通过判断data.pwdConfirm!==data.password确定两次密码是否输入一致
3、通过formName.inputField.$dirty确定此项是否填写过
两次输入的密码不一致
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验证邮箱格式是否正确
邮箱长度不能小于5位请填写正确的邮箱格式邮箱长度不能大于30位
2.4 单复选框
单复选框主要确定数据绑定问题，以及复选框的数据渲染
1、通过以data对象的属性形式来绑定数据
2、多选的选项值通过ng-repeat进行遍历
3、设置value值以便提交时对值进行区分
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指令遍历数据和设置默认值
说明：
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指令）
2.6 表单提交
1、功能需求：当表单验证不通过时，使提交按钮失效（ng-disabled）,
html结构：
js:
$scope.reset=function(){
$scope.myForm.$setPristine();
}
注：表单中有一个$setPristine()方法将表单复位原始状态，class,$dirty,$pristine会恢复原始状态。但注意表单的错误信息$error并不会被隐藏，所以在验证表单时，记得在每一项错误信息都是由$dirty才判断的。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
