angular实现表单验证及提交功能
本例通过Angular框架来实现简单的表单验证
一、html结构
1、借助于bootstrap快速的编写了一个简单的表单
代码主要部分如下:
<divclass="container"style="margin-top:30px;"ng-controller="myCtrl"> <h1style="text-align:center">用户表单提交</h1> <formaction="upload.js"class="form-horizontal"name="myForm"> <divclass="form-group"> <labelfor="username"class="col-sm-3control-label">用户名</label> <divclass="col-sm-9"> <inputtype="text"autocomplete="false"name="username"placeholder="用户名"ng-model="data.username"id="username"class="form-control"required> <divclass="alertalert-dangerhelp-block"> 用户名长度不能小于5位 </div> <divclass="alertalert-dangerhelp-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
如下:
<divclass="form-group"> <labelfor="username"class="col-sm-3control-label">用户名</label> <divclass="col-sm-9"> <inputtype="text"autocomplete="false"name="username"placeholder="用户名"ng-model="data.username"id="username"ng-minlength="5"ng-maxlength="15"class="form-control"required> <divclass="alertalert-dangerhelp-block"ng-show="myForm.username.$error.minlength"> 用户名长度不能小于5位 </div> <divclass="alertalert-dangerhelp-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确定此项是否填写过
<divclass="form-group"> <labelclass="col-sm-3control-label">确认密码</label> <divclass="col-sm-9"> <inputtype="password"name="pwdConfirm"ng-model="data.pwdConfirm"placeholder="确认密码"id="pwdConfirm"requiredclass="form-control"> <divclass="alertalert-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验证邮箱格式是否正确
<divclass="form-group"> <labelclass="col-sm-3control-label">邮箱</label> <divclass="col-sm-9"> <inputtype="email"name="email"ng-model="data.email"placeholder="邮箱"class="form-control"requiredng-pattern="/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/"> <divclass="alertalert-dangerhelp-block"ng-show="myForm.email.$error.minlength"> 邮箱长度不能小于5位 </div> <divclass="alertalert-dangerhelp-block"ng-show="myForm.email.$error.pattern"> 请填写正确的邮箱格式 </div> <divclass="alertalert-dangerhelp-block"ng-show="myForm.email.$error.maxlength"> 邮箱长度不能大于30位 </div> </div> </div>
2.4单复选框
单复选框主要确定数据绑定问题,以及复选框的数据渲染
1、通过以data对象的属性形式来绑定数据
2、多选的选项值通过ng-repeat进行遍历
3、设置value值以便提交时对值进行区分
<divclass="form-group"> <labelclass="col-sm-3control-label">性别</label> <divclass="col-sm-9"> <labelclass="radio-inline"> <inputtype="radio"name="sex"value="1"ng-model="data.sex"/>男 </label> <labelclass="radio-inline"> <inputtype="radio"name="sex"value="0"ng-model="data.sex"/>女 </label> </div> </div> <divclass="form-group"> <labelclass="col-sm-3control-label">爱好</label> <divclass="col-sm-9"> <labelclass="radio-inline"ng-repeat="hobbyinhobbies"> <inputtype="checkbox"name="hobby"ng-model="hobbiesC"value="{{hobby.id}}"/> {{hobby.name}} </label> </div> </div> <divclass="col-sm-9col-sm-offset-3"> <inputtype="reset"class="btnbtn-danger"value="重置"> <inputtype="submit"class="btnbtn-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.2html中渲染城市数据
通过ng-options指令和ng-model指令遍历数据和设置默认值
<divclass="form-group"> <labelclass="col-sm-3control-label">出生地</label> <divclass="col-sm-3"> <selectname="birthAddress"id=""ng-model="data.province"ng-options="c.idasc.nameforcincities"> <optionvalue="">--请选择--</option> </select> </div> </div>
说明:
1、ng-options=”obj.nameforobjindatas”常见用法,通过obj.idasobj.name设置option标签的value值为id,内容为name
2、ng-model可用于设置select的默认值
2.5.3定义过滤器用于过滤省份,城市等
.filter("cityFilter",function(){ returnfunction(input,parent){ varfiltedData=[]; angular.forEach(input,function(value,key){ if(value.parent===parent){ filtedData.push(value) } }) returnfiltedData; } })
说明:
1、如上通过定义cityFilter,传入一个parent作为参数,遍历传入的数据,并宽判断是否与传入的parent相等来确定当前城市是哪一级
2、返回的filtedData即是过滤结果。
3、用到了angular.forEach(obj,fn)迭代器,其中fn有三个参数传入,分别是value,key,obj;value即为当前遍历出的对象,key为遍历的唯一标识,obj为被遍历的数组或对象本身。
使用(省份): ng-options="c.idasc.nameforcincities|cityFilter:0"
2)、城市对应选择
1、根据data.province作为过滤参数,进行城市筛选
2、区域的选择同理,可设置当选择了城市后,再出现区域选项框(ng-show指令)
<divclass="col-sm-2"> <selectname="birthC"ng-model="data.cities"ng-options="c.idasc.nameforcincities|cityFilter:data.province"> <optionvalue="">--请选择--</option> </select> </div> <divclass="col-sm-2"ng-show="!myForm.birthC.$pristine"> <selectname="birthD"ng-model="data.district"ng-options="c.idasc.nameforcincities|cityFilter:data.cities"> <optionvalue="">--请选择--</option> </select> </div>
2.6表单提交
1、功能需求:当表单验证不通过时,使提交按钮失效(ng-disabled),
html结构:
<divclass="col-sm-9col-sm-offset-3"> <inputtype="reset"class="btnbtn-danger"value="重置"ng-click="reset()"> <inputtype="submit"class="btnbtn-primary"value="提交"ng-disabled="myForm.$invalid"> </div>
js:
$scope.reset=function(){ $scope.myForm.$setPristine(); }
注:表单中有一个$setPristine()方法将表单复位原始状态,class,$dirty,$pristine会恢复原始状态。但注意表单的错误信息$error并不会被隐藏,所以在验证表单时,记得在每一项错误信息都是由$dirty才判断的。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。