angularjs+ionic注册页面表单验证

PHPz
Lepaskan: 2017-03-12 15:59:14
asal
1948 orang telah melayarinya

在已建立tabs和路由注册页面html:

功能:

  • 进行了手机号、密码格式验证,两次密码输入是否相同的判断,都正确且复选框勾选后才可点击注册,进入tabs.mypage页面。

  • 未进行验证码真正发送、获取后台验证码数据与输入验证码进行对比。

使用:

  • 4-- novalidate:禁止执行<form>表单原生校验,避免与自己设置的校验方法起冲突

  • 7-- type="number":限定输入数字类型;required:限定不能为空;ng-minlength/ng-maxlength:限定输入字符最小、最大长度

  • 11-- type="password"语义化,密码格式;ng-pattern="/[a-zA-Z0-9]/":用正则限定输入数字或字母

  • 20-- ng-click="getTestCode()":绑定点击事件ng-bind="description":控制按钮显示文字;ng-disabled="canClick":控制按钮可用性,避免短时间内多次请求

  • 25-- ng-show="":根据条件显示提示文字;registerForm.number:name为registerForm的

    表单中name为number的输入框;$dirty输入框已与用户进行交互;$invalid输入框内容未通过自己设置的校验。

  • 33-- ng-disabled="registerForm.$invalid":表单都通过了校验,才可用

注意:不要在


                                                                  手机号                                                                            输入密码                                                                            确认密码                                                                            验证码                                                                                                                   手机号输入有误             密码输入格式有误         两次密码输入不一致                                    同意发货么用户协议                           注册
Salin selepas log masuk

路由绑定控制器js:

功能:点击触发获取验证码函数,在倒计时59s期间不可再次发送请求。

注意:记得在控制器中注入$interval


 1     $scope.canClick=false; 2     $scope.description="获取验证码"; 3     var second=59; 4     var timerHandler; 5     $scope.getTestCode=function(){10         timerHandler=$interval(function(){11             if(second<=0){12             $interval.cancel(timerHandler);13             second=59;14             $scope.description="获取验证码";15             $scope.canClick=false;16         }else{17             $scope.description=second+"s后重发";18             second--;19             $scope.canClick=true;20         }21             },1000)22     };
Salin selepas log masuk

 

 

Atas ialah kandungan terperinci angularjs+ionic注册页面表单验证. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!