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;

                    };

                }

            };

        });

angularjs的表单验证的更多相关文章

  1. 基于angularJS的表单验证练习

    今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...

  2. 【AngularJs】---表单验证

    1. 必填项 验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2 ...

  3. angularJS 过滤器 表单验证

    过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)D ...

  4. AngularJS 的表单验证

    最近开始学习angularjs,学到表单验证的时候发现有必要学习下大神的好文章: 转:http://www.oschina.net/translate/angularjs-form-validatio ...

  5. AngularJS复习------表单验证

    在AngularJS中能够将HTML5表单验证功能同自己的验证指令结合起来使用,这里介绍使用的核心功能. 使用表单验证,首先要确保表单的每个控件都有name属性 如果想要屏蔽浏览器对表单的默认验证行为 ...

  6. AngularJs实现表单验证

    首先,我们应该知道,表单中,常用的验证操作有: $dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine 表单没有填写记录 $error 表单 ...

  7. 夺命雷公狗—angularjs—3—表单验证的高级用法

    其实我们的angularjs都是是块状代码,其实是可以在实际开发中保存下来以后就可以达到重复利用的目的了.. 废话不多说,直接上代码: <!doctype html> <html l ...

  8. AngularJS form表单验证（非常全面)

    构建一个ng表单 novalidate=”novalidate” 2.form中不能有action属性.提交交由ng-submit处理 3.每个input一定要有ng-model,最好有一个name方 ...

  9. AngularJS的表单验证提交示例

    代码下载:https://files.cnblogs.com/files/xiandedanteng/angularjsFormSubmit.rar 前台代码: <%@ page content ...

随机推荐

  1. PowerDesigner PDM生成sql脚本时：表的名称和表里面的字段名称都有引号解决。。。

    PowerDesigner PDM生成sql脚本时:表的名称和表里面的字段名称都有引号解决... 1.当你的PowerDesigner 是新安装时,你得设置可能就会出现一些问题,在这里比如:PDM生成 ...

  2. LA

    grmon -altjtag -u 公式rand()%(b-a),是求范围随机数的计算公式,%是做求余运算,正整数对n求余的范围肯定是在0~n-1之间,也就是rand()%(b-a)的范围是0~b-a ...

  3. WPF之命令浅谈

    一.认识命令 1.1命令的特点 提到“命令”,我们应该想到命令的发出者,命令的接受者,命令的内容,准备工作,完成任务,回报工作...与事件中的发送者,接受者,消息,处理,处理,处理一一对应,如果是单纯 ...

  4. C#获取本机可用端口

    当我们要创建一个Tcp/UDP Server connection ,我们需要一个范围在1000到65535之间的端口 .但是本机一个端口只能一个程序监听,所以我们进行本地监听的时候需要检测端口是否被 ...

  5. Verlet-js JavaScript 物理引擎

    subprotocol最近在Github上开源了verlet-js.地址为https://github.com/subprotocol/verlet-js.verlet-js是一个集成Verlet的物 ...

  6. Windows Azure Storage (19) 再谈Azure Block Blob和Page Blob

    <Windows Azure Platform 系列文章目录> 请读者在参考本文之前,预习相关背景知识:Windows Azure Storage (1) Windows Azure St ...

  7. Golang与C#之switch区别

    Golang与C#之switch区别 Go是Google开发的一种编译型,可并行化,并具有垃圾回收功能的编程语言. C#是微软公司发布的一种面向对象的.运行于.NET Framework之上的高级程序 ...

  8. Atitit 查询优化器的流程attilax总结

    Atitit 查询优化器的流程attilax总结 1.1. 来理解该过程:1 1.2. 关于这些优化器的最重要原则的就是:尽可能的减少扫描范围,2 1.3. .筛选条件分析2 1.4. 二.索引优化2 ...

  9. easyui datagrid cell title换行

    " " title="' +row.TaskName + "

  10. MongoDB 文档的删除操作

    在db中删除数据是十分危险的事,建议使用logic delete,即在doc中增加一个field:IsDeleted,将其设置为1,表示该doc在逻辑上被删除,这种workaround将delete操 ...