<!DOCTYPE HTML>

<html ng-app="myApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

//验证通过不通过的样式

input.ng-valid{ border:1px green solid; background:green;}

input.ng-invalid{ border:1px red solid; background:red;}

</style>

<script src="angular.min.js"></script>

<script>

var m1 = angular.module('myApp',[]);

m1.controller('Aaa',['$scope',function($scope){

    $scope.text = 'hello';

}]);

</script>

</head>

<body>

<div ng-controller="Aaa">

    <form novalidate name="myForm">

        //ng-model是将视图绑定Model（变量）

        <input type="text" name="myText" ng-model="text" required ng-minlength="" ng-pattern="/^[a-zA-Z]+$/">

        //通过名字来查找输入框

        <div>{{ myForm.myText.$valid }}</div>   //校验成功是true,

        <div>{{ myForm.myText.$invalid }}</div>        //校验成功是false,

        <div>{{ myForm.myText.$pristine }}</div>   //验证的值没有修改过为true修改后是false

        <div>{{ myForm.myText.$dirty }}</div>    //验证值修改后为true没有修改为false

        <div>{{ myForm.myText.$error }}</div>  //验证失败为false

    </form>

</div>

</body>

</html>
<!DOCTYPE HTML>

<html ng-app="myApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

</style>

<script src="angular.min.js"></script>

<script>

var m1 = angular.module('myApp',[]);

m1.controller('Aaa',['$scope',function($scope){

    $scope.regText = {//定义对象

        regVal : 'default',

        regList : [

            { name : 'default' , tips : '请输入用户名'},

            { name : 'required' , tips : '用户名不能为空'},

            { name : 'pattern' , tips : '用户名必须是字母'},

            { name : 'pass' , tips : '√'}

        ]

    };

    $scope.regPassword = {//定义对象

        regVal : 'default',

        regList : [

            { name : 'default' , tips : '请输入密码'},

            { name : 'required' , tips : '密码不能为空'},

            { name : 'minlength' , tips : '密码至少6位'},

            { name : 'pass' , tips : '√'}

        ]

    };

    $scope.change = function( reg , err ){//reg = "regText", err = {required: false, pattern: true}

        for(var attr in err){

            if( err[attr] == true ){

                $scope[reg].regVal = attr;//$scope[regText].regVal = attr;

                return;

            }

        }

        $scope[reg].regVal = 'pass';//$scope[regText].regVal = 'pass';

    };

}]);

</script>

</head>

<body>

<div ng-controller="Aaa">

    <form novalidate name="nForm">

        <div>

            <label>用户名:</label>

            //nForm.nText.$error返回的值是{required: false, pattern: true}这种类型

            <input type="text" name="nText" ng-model="regText.name" required ng-pattern="/^[a-zA-Z]+$/" ng-blur="change('regText',nForm.nText.$error)">

            //提示信息遍历出来，|是管道符，filter是过滤器， : 是传参数，regText.regVal是传的参数，

            <span ng-repeat=" re in regText.regList | filter : regText.regVal ">

                {{ re.tips }}

            </span>

        </div>

        <div>

            <label>密码:</label>

            <input type="password" name="nPassword" ng-model="regPassword.name" required ng-minlength="" ng-blur="change('regPassword',nForm.nPassword.$error)">

            //提示信息

            <span ng-repeat=" re in regPassword.regList | filter : regPassword.regVal ">

                {{ re.tips }}

            </span>

        </div>

    </form>

</div>

</body>

</html>

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

  1. angularJs表单校验（超级详细！！！）

    html代码 <!DOCTYPE html> <html ng-app="angularFormCheckModule"> <head> < ...

  2. ng-messages AngularJs 表单校验方式

    最新研究了一下表单校验,直接上代码. <!DOCTYPE html><html ng-app='app'><head> <meta charset=" ...

  3. AngularJS 1.2.x 学习笔记（表单校验篇）

    https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...

  4. AngularJs轻松入门（六）表单校验

    表单数据的校验对于提高WEB安全性意义不大,因为服务器接收到的请求不一定来自我们的前端页面,有可能来自别的站点,黑客可以自己做一个表单,把数据提交到我们的服务器(即跨站伪造请求),这样就绕过了前端页面 ...

  5. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

  6. angularjs表单验证checkbox

    angularjs中默认有表单验证的支持,见文末的refer 我想要验证至少要选择一个checkbox,否则就不能提交 但是checkbox貌似没有简单的方法,想来想去给出下面的解决方案 valida ...

  7. AngularJS 表单

    AngularJS 表单是输入控件的集合. HTML控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 H ...

  8. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  9. 关于jQuery表单校验的应用

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

随机推荐

  1. 【转】 C#获取当前程序运行路径的方法集合

    [转] C#获取当前程序运行路径的方法集合 //获取当前进程的完整路径,包含文件名(进程名). string str = this.GetType().Assembly.Location; resul ...

  2. ES学习——分析器和自定义分析器

    简介 es在对文档进行倒排索引的需要用分析器(Analyzer)对文档进行分析.建立索引.从文档中提取词元(Token)的算法称为分词器(Tokenizer),在分词前预处理的算法称为字符过滤器(Ch ...

  3. Webserver管理系列：4、WinPE

    WinPE能够识别NTFS分区,使用WinPE能够备份/还原系统.能够重置用户password. 首先给大家看下怎样用WinPE重置password: 放入WinPE光盘-〉启动后-〉点開始菜单-〉程 ...

  4. Android px,dp,pt,sp的差别

    px(像素点) mm 等Android不建议用 为什么电脑web开发能够用而Android不建议用? 由于px代表像素点个数,一般电脑分辨率都同样 不管14寸还是15寸都是1366*768而手机分辨率 ...

  5. Android用canvas画哆啦A梦

    先上图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/diss ...

  6. iOS中respondsToSelector与conformsToProtocol的相关理解和使用

    respondsToSelector相关的方法 : -(BOOL) isKindOfClass: classObj 用来判断是否是某个类或其子类的实例 -(BOOL) isMemberOfClass: ...

  7. akka 原理分析优秀博客

    http://www.nyankosama.com/2014/12/15/akka-source/ http://blog.csdn.net/aigoogle/article/details/4210 ...

  8. nyoj--236--心急的C小加（动态规划&&LIS）

    心急的C小加 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描述 C小加有一些木棒,它们的长度和质量都已经知道,需要一个机器处理这些木棒,机器开启的时候需要耗费一个单位的时间 ...

  9. 寻找两个有序数组的中位数 C++实现leetcode系列（四）

    给定两个大小为 m 和 n 的有序数组 nums1和 nums2. 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O(log(m + n)). 你可以假设 nums1 和 nums2 不 ...

  10. 实战c++中的vector系列--正确释放vector的内存(clear(), swap(), shrink_to_fit())

    关于vector已经写的差不多了,似乎要接近尾声了,从初始化到如何添加元素再到copy元素都有所涉及,是时候谈一谈内存的释放了. 是的,对于数据量很小的vector,完全没必要自己进行主动的释放,因为 ...