html代码

<!DOCTYPE html>

<html ng-app="angularFormCheckModule">

    <head>

        <meta charset="UTF-8">

        <title>angular表单校验</title>

        <link rel="stylesheet" href="../css/bootstrap.min.css" />

        <style>

            span{

                color: red;

            }

        </style>

    </head>

    <body ng-controller="angularFormCheckCtrl">

        <!--使用angular校验，每一个校验的项都必须用ng-model，不然无法执行在脏检查，就无法校验-->

        <form name="angularForm" novalidate method="post">

            <table class="table table-bordered">

                <tr>

                    <td>用户名</td>

                    <td>

                        <input type="number" required="required" ng-model="user.userName" name="userName" ng-minlength="6"/>

                        <!--angularForm.userName.$dirty检查是否是第一次输入！网上有很多种方法校验是否是第一次输入-->

                        <span class="warning" ng-show="angularForm.userName.$dirty && angularForm.userName.$error.required">*</span>

                        <span class="warning" ng-show="angularForm.userName.$error.number">只能输入数字</span>

                        <span class="warning" ng-show="angularForm.userName.$error.minlength">最少为6位数</span>

                    </td>

                </tr>

                <tr>

                    <td>密码</td>

                    <td>

                        <!--这里的id,一定要等于compare-pwd的值，因为指令里面是根据Id取值的-->

                        <input type="password" required="required" ng-minlength="6" name="pwd" ng-model="user.password" id="pwd"/>

                        <!--angularForm.pwd.$pristine首次输入，不太清楚的就自己运行，去掉条件一个一个的试！-->

                        <span class="warning" ng-show="!angularForm.pwd.$pristine && angularForm.pwd.$error.required">*</span>

                        <span class="warning" ng-show="angularForm.pwd.$error.minlength">最少为6位数</span>

                    </td>

                </tr>

                <tr>

                    <td>确认密码</td>

                    <td>

                        <!--这里compare-pwd的值，要等于被比较的对象的name属性值，即第一个密码框的name值-->

                        <input type="password" required="required" name="pwd2"  compare-pwd="pwd" ng-model="pwd2"/>

                        <span class="warning" ng-show="angularForm.pwd2.$error.required">*</span>

                        <!--注意这里的pwdmatch,是指令里面设置的-->

                        <span class="warning" ng-show="angularForm.pwd2.$error.pwdmatch">X</span>

                        <span class="warning" ng-show="angularForm.pwd2.$valid" style="color: green;">OK</span>

                        <!--

                            其实这种事最简单的校验方式，不用写指令！！！

                            <span ng-show="user.password !=pwd2">两次密码输入不一致</span>

                        -->

                    </td>

                </tr>

                <tr>

                    <td>手机</td>

                    <td>

                        <!--pattern正则表达式校验输入内容-->

                        <input type="number" required="required" name="phone" ng-model="user.phone" ng-pattern="/^1[3|4|5|7|8]\d{9}$/">

                        <span class="warning" ng-show="angularForm.phone.$error.required">*</span>

                        <span class="warning" ng-show="angularForm.phone.$error.number">只能输入数字</span>

                        <span class="warning" ng-show="angularForm.phone.$error.pattern">手机格式不正确</span>

                    </td>

                </tr>

                <tr>

                    <td>邮箱</td>

                    <td>

                        <input type="email" required="required" ng-model="user.email" name="email"/>

                        <span class="warning" ng-show="angularForm.email.$error.required">*</span>

                        <span class="warning" ng-show="angularForm.email.$error.email">邮箱格式不正确</span>

                    </td>

                </tr>

                <tr>

                    <td>URL</td>

                    <td>

                        <input type="url" required="required" ng-model="user.url" name="url"/>

                        <span class="warning" ng-show="angularForm.url.$error.required">*</span>

                        <span class="warning" ng-show="angularForm.url.$error.url">URL格式不正确</span>

                    </td>

                </tr>

                <tr>

                    <td>(注:*为必填)</td>

                    <td>

                        <input type="submit" value="提交" ng-disabled="!angularForm.$valid" class="btn btn-success"/>

                    </td>

                </tr>

            </table>

        </form>

    </body>

    <script type="text/javascript" src="../js/jquery.min.js" ></script>

    <script type="text/javascript" src="../js/angular-1.2.22.js" ></script>

    <script type="text/javascript" src="../js/angularFormCheck.js" ></script>

</html>

js代码（除了指令意外，没什么可用的，写出来只是为了，说一下mvc模式而已！）

var app = angular.module("angularFormCheckModule",[]);

/*这里使用MVC的模式（用来举例说明MVC而已）*/

app.controller("angularFormCheckCtrl",function($scope,angularFormCheckFactory){//function里的参数写你在函数里需要用到的

    $scope.testVar = angularFormCheckFactory.getTest();//这里就能取到$scope.testVar的值为---"练习angular表单校验";

    $scope.user = {};

    $scope.test= "sss";

});

/*自己可以去看factory、service、providers的区别（http://www.oschina.net/translate/angularjs-factory-vs-service-vs-provider）*/

/*用 Factory 就是创建一个对象，为它添加属性，然后把这个对象返回出来。*/

app.factory('angularFormCheckFactory',function(){

    //这里写自己的业务逻辑

    var test = "练习angular表单校验";

    var service = {};//自定义一个对象

    service.getTest = function(){//给对象添加方法

        return test;

    }

    return service;//返回自定义的service对象！！！

});

/*自定义指令--比较两个密码是否相等.angular的指令是驼峰的形式（这里是comparePwd页面就是compare-pwd）*/

app.directive('comparePwd',function(){

    /*angular 自定义指令，可上网自行查找*/

    return{

        require : 'ngModel',

        /*scope表示作用域，elem表示使用这个指令的元素对象（这里指第二个密码框），attrs。。。ctrl。。。*/

        link : function(scope,elem,attrs,ctrl){

            /*写自己的业务逻辑*/

            //注意这样取值的话，第一密码框的Id值必须要设置且必须与第二个密码框的compare-pwd属性的值相同

            var firstPwdIdObj = "#" + attrs.comparePwd;

            $(elem).add(firstPwdIdObj).on('keyup',function(){

                /*手动执行脏检查*/

                scope.$apply(function(){

                    //$(firstPwdIdObj).val()表示第一个密码框的值。elem.val()表示第二个密码框的值

                    var flag = elem.val() === $(firstPwdIdObj).val();

                    //alert(flag+",--"+elem.val()+",--"+$(firstPwdIdObj).val());

                    ctrl.$setValidity("pwdmatch",flag);//flag,表示是否相等。pwdmatch用于$error时的标识符，注意看页面，$setValidity是require中ngModel的方法！

                });

            });

        }

    }

});

不好意思今天才知道这个可以添加代码，之前写的博客代码都好丑，没有对齐（。。。哈哈，乡下来的！！！）

angularJs表单校验（超级详细！！！）的更多相关文章

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

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

  2. angularjs 表单校验

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  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. vue 表单校验（二）

    vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐, ...

  7. 简单好用的表单校验插件——jQuery Validate基本使用方法总结

    jquery validate当前最新版本是1.17.0,下载链接是:https://github.com/jquery-validation/jquery-validation/releases/t ...

  8. 应用二：Vue之ElementUI Form表单校验

    (注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的)   表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基 ...

  9. django基础之day09，创建一个forms表单组件进行表单校验，知识点：error_messages，label，required，invalid，局部钩子函数，全局钩子函数， forms_obj.cleaned_data，forms_obj.errors，locals()， {{ forms.label }}:{{ forms }}，{{ forms.errors.0 }}

    利用forms表单组件进行表单校验,完成用户名,密码,确认密码,邮箱功能的校验 该作业包含了下面的知识点: error_messages,label,required,invalid,局部钩子函数,全 ...

随机推荐

  1. 手持终端PDA应用固定资产管理系统（资产查询 盘点）软件程序系统

    一.产品概述 固定资产管理系统,是针对企事业单位内部资产管理中出现的工作量大.过程繁琐.追踪困难等一系列难题开发的一套先进管理软件.软件实现了对资产的多种方式管理,目前包括条形码.二维码.RFID管理 ...

  2. 什么是智能扫描开单打印进销存POS?安卓工业手持PDA设备上的POS销售开单,现场打印打票，用扫描枪太方便了

    安卓PDA版POS销售开单如果和扫描枪配合使用,和超市的POS销售一样的操作 什么是智能扫描开单打印进销存POS? 互联网特性,让它在数据统计分析.客户关系管理等方面表现出众.智能POS,不仅是一个收 ...

  3. HRESULT:0x80070057 (E_INVALIDARG)的异常

    错误信息: 未能加载文件或程序集……或它的某一个依赖项.参数不正确. (异常来自 HRESULT:0x80070057 (E_INVALIDARG)) English:Could not load f ...

  4. STL UVA 11991 Easy Problem from Rujia Liu?

    题目传送门 题意:训练指南P187 分析:用vector存id下标,可以用map,也可以离散化用数组存(发现不用离散化也可以) map #include <bits/stdc++.h> u ...

  5. 江西理工大学南昌校区acm选拔赛题解

    第一题略 第二题 #include<stdio.h> int main() { int a1,a2,a3,b1,b3,b2,c1,c2,c3,n,sum,d1,d2,d3,i; scanf ...

  6. [深入浅出Windows 10]QuickCharts图表控件库解析

    13.4 QuickCharts图表控件库解析     QuickCharts图表控件是Amcharts公司提供的一个开源的图表控件库,这个控件库支持WPF.Silverlight.和Windows等 ...

  7. 【BZOJ】2253: [2010 Beijing wc]纸箱堆叠

    题意 三维严格偏序最长链.(\(n \le 50000\)) 分析 按第一维排序然后以第二和第三维作为关键字依次加入一个二维平面,维护前缀矩形最大值. 题解 当然可以树套树....可是似乎没有随机化算 ...

  8. 【BZOJ】2115: [Wc2011] Xor

    http://www.lydsy.com/JudgeOnline/problem.php?id=2115 题意:给出一个n个点m条边的无向连通边加权图,求1-n的某条路径使得异或值最大(可以重复点可以 ...

  9. URAL 1223. Chernobyl’ Eagle on a Roof

    题目链接 以前做过的一题,URAL数据强点,优化了一下. #include <iostream> #include <cstdio> #include <cstring& ...

  10. ObjectContext,DataContext和DBContext 分别获取linq 的sql方法

    ObjectContext 先定义一个扩展方法: public static string ToTraceString<T>(this IQueryable<T> t) { s ...