angularjs的表单验证

angularjs内置了常用的表单验证指令,比如min,require等。下面是演示:

<!DOCTYPE html>
<html>
    <head>
          <meta charset="UTF-8">
    </head>
    <body ng-app="app" ng-controller="ctrl" >
        <style>
            .valid-error{
                color:red
            }
        </style>
        <form name="form" novalidate>
             <input type="text" ng-model="value0" required name="input0">
             <span class="valid-error" ng-show="form.input0.$error.required">
                        值必须输入
            </span>
            <input type="number" ng-model="value1" min="0" name="input1">
             <span class="valid-error" ng-show="form.input1.$error.min">
                        值必须大于等于0
            </span>
        </form>
    </body>
    <script src="bower_components/angular/angular.js">
    </script>
    <script>
        var app = angular.module('app',[]);
        app.controller('ctrl',function($scope){
            $scope.value0='1';
            $scope.value1=0;
        });
    </script>
</html>

我们也可以自定义一个验证指令,比如验证电话号码的。

   <input type="text" ng-model="phoneNum"  name="phoneNum" phone>
             <span class="valid-error" ng-show="form.phoneNum.$error.phone">
                       电话号码不合法
            </span>
 var PHONE_REGEXP = /(^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$/;     app.directive('phone', function () {
            return {
                require: 'ngModel',
                link: function (scope, elm, attrs, ctrl) {
                    ctrl.$validators.phone = function (modelValue, viewValue) {
                        if (ctrl.$isEmpty(modelValue)) {
                            // consider empty models to be valid
                            return true;
                        }

                        if (PHONE_REGEXP.test(viewValue)) {
                            // it is valid
                            return true;
                        }

                        // it is invalid
                        return false;
                    };
                }
            };
        });

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IT笔记

SpringBoot开发案例之微信小程序录音上传

书接上回的《SpringBoot开发案例之微信小程序文件上传》,正常的业务流程是,口语测评需要学生通过前端微信小程序录入一段音频,通过调用第三方音频处理服务商进...

6268
来自专栏FreeBuf

渗透测试技巧分享

1.AT時提示綁定句柄無效 經常碰到的這個問題,百度搜索的全部都沒一個能解決的。 正確的解決辦法是先在地址欄\\1.1.1.1 得到對方機器名,例如ADMINP...

18310
来自专栏美团技术团队

【技术博客】Android自定义Lint实践

概述 Android Lint是Google提供给Android开发者的静态代码检查工具。使用Lint对Android工程代码进行扫描和检查,可以发现代码潜在的...

3906
来自专栏知识分享

八,ESP8266 文件保存数据(基于Lua脚本语言)

应该是LUA介绍8266的最后一篇,,,,,,下回是直接用SDK,,然后再列个12345.......不过要等一两个星期,先忙完朋友的事情 前面几篇 用AT指令...

3547
来自专栏IT笔记

SpringBoot开发案例之微信小程序录音上传

前言 书接上回的《SpringBoot开发案例之微信小程序文件上传》,正常的业务流程是,口语测评需要学生通过前端微信小程序录入一段音频,通过调用第三方音频处理服...

9028
来自专栏.NET开发那点事

angularjs的表单验证

angularjs内置了常用的表单验证指令,比如min,require等。下面是演示:

560
来自专栏Netkiller

Apache Sqoop 将mysql导入到Hadoop HDFS

第 21 章 Apache Sqoop 目录 21.1. 安装 Sqoop 21.2. sqoop2-tool 21.2.1. verify 21.2.2. u...

4847
来自专栏221-B

不懂汇编,如何逆向(iOS)

其实这个是非必要项, 自己手动砸壳需要已越狱的手机. 想手动砸壳可以参考这篇文章.

1372
来自专栏非著名程序员

Android M 权限最佳实践

前言 Google在Android 6.0 上开始原生支持应用权限管理,再不是安装应用时的一刀切。权限管理虽然很大程度上增加了用户的可操作性,但是却苦了广大An...

2039
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(48)-工作流设计-起草新申请

创建新表单之后,我们就可以起草申请了,申请按照严格的表单步骤和分支执行。 起草的同时,我们分解流转的规则中的审批人并保存,具体流程如下 接下来创建DrafCon...

1976

扫码关注云+社区