<!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. 洛谷—— P3225 [HNOI2012]矿场搭建

    https://www.luogu.org/problem/show?pid=3225 题目描述 煤矿工地可以看成是由隧道连接挖煤点组成的无向图.为安全起见,希望在工地发生事故时所有挖煤点的工人都能有 ...

  2. [Angular] Read Custom HTTP Headers Sent by the Server in Angular

    By default the response body doesn’t contain all the data that might be needed in your app. Your ser ...

  3. MFC 加入背景图片并让控件背景透明

    /*加入背景图片*/ BOOL CTOOLDlg::OnEraseBkgnd(CDC* pDC) {  // TODO: 在此加入消息处理程序代码和/或调用默认值  CDialog::OnEraseB ...

  4. Django连接mysql

    链接文档地址:https://docs.djangoproject.com/zh-hans/2.0/intro/tutorial02/ 由于我使用的是mysql,所以设置的是mysql的: 在mysl ...

  5. poj3352Road Construction 边双连通+伪缩点

    /* 对于边双连通分支,求法更为简单. 仅仅需在求出全部的桥以后,把桥边删除.\ 原图变成了多个连通块,则每一个连通块就是一个边双连通分支. 桥不属于不论什么 一个边双连通分支,其余的边和每一个顶点都 ...

  6. yolo源码解析(2):处理图片

    首先安装ffmpeg, 参考https://blog.csdn.net/lwgkzl/article/details/77836207 然后将视频切分为图片, 参考:https://zhuanlan. ...

  7. xshell同时发送多条命令

    1.如图,勾选撰写栏 勾选全部会话 下面的是一个很方便的小技巧.分屏 如下图垂直排列 水平排列等等

  8. 为什么不针对internal接口写单元测试？

    测试驱动的开发(TDD,Test Driven Development)的核心理念,是要使得重构(refactoring)更为有效,而不是创建更多的测试. 对一个有着长生命周期的项目来讲,在它的第一个 ...

  9. SpringBoot(五) 番外---Docker

    Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的 Li ...

  10. 你不知道的JavaScript（二）数组

    作为一种线性数据结构,几乎每一种编程语言都支持数组类型.和c++.java这些强类型的语言相比,JavaScript数组有些不同,它可以存放任意类型的值.上节中有提到过JS中任意类型的值都可以赋值给任 ...