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

网友投稿 305 2023-06-15


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

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

一、html结构

1、借助于bootstrap快速的编写了一个简单的表单

代码主要部分如下:

用户名长度不能小于5位

用户名长度不能大于15位

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确定此项是否填写过

<input type="password" name="pwdConfirm" ng-model="data.pwdConfirm" placeholder="确认密码" id="pwdConfirm" required class="form-control">

两次输入的密码不一致

2.3 邮箱验证

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

1、使用H5中新增type属性值email作为

2、通过ng-pattern指令定义邮箱验证的正则

3、邮箱验证常用正则表达式:^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+

4、通过myodOhjRvcgTForm.email.$error.pattern验证邮箱格式是否正确

邮箱长度不能小于5位

请填写正确的邮箱格式

邮箱长度不能大于30位

2.4 单复选框

单复选框主要确定数据绑定问题,以及复选框的数据渲染

1、通过以data对象的属性形式来绑定数据

2、多选的选项值通过ng-repeat进行遍历

3、设置value值以便提交时对值进行区分

 {{hobby.name}}

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才判断的。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Bootstarp 基础教程之表单部分实例代码
下一篇:微信小程序实现图片自适应(支持多图)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~