代码下载：https://files.cnblogs.com/files/xiandedanteng/angularjsSoccerFormCheck.rar

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="notesApp">
 <head>
  <title> New Document </title>
  <style>
    .username.ng-valid{
        background-color:lightgreen;
    }
    .username.ng-invalid{
        background-color:pink;
    }
    .userage.ng-valid{
        background-color:lightgreen;
    }
    .userage.ng-invalid{
        background-color:pink;
    }
    .usermail.ng-valid{
        background-color:lightgreen;
    }
    .usermail.ng-invalid{
        background-color:pink;
    }
    .userdate.ng-valid{
        background-color:lightgreen;
    }
    .userdate.ng-invalid{
        background-color:pink;
    }
    .usersn.ng-valid{
        background-color:lightgreen;
    }
    .usersn.ng-invalid{
        background-color:pink;
    }
    .userurl.ng-valid{
        background-color:lightgreen;
    }
    .userurl.ng-invalid{
        background-color:pink;
    }
  </style>
    <meta charset="gbk">
    <script src="angular1.4.6.min.js"></script>
 </head>

 <body ng-controller="MainCtrl as ctrl">
    <form ng-submit="ctrl.submit()" name="myForm">
        <table>
            <tr>
                <td width="50px">姓名:</td>
                <td>
                    <input type="text" class="username" name="uname" ng-model="ctrl.user.name" required ng-minlength="4"/>
                </td>
                <td>
                    <span ng-show="myForm.uname.$error.required">This a required field</span>
                    <span ng-show="myForm.uname.$error.minlength">Minimum length required is 4</span>
                    <span ng-show="myForm.uname.$invalid">This field is invalid</span>
                </td>
            </tr>

            <tr>
                <td width="50px">年龄:</td>
                <td>
                    <input type="number" class="userage" name="uage" ng-model="ctrl.user.age" required  ng-minlength="2"/>
                </td>
                <td>
                    <span ng-show="myForm.uage.$error.required">This a required field</span>
                    <span ng-show="myForm.uage.$error.minlength">Minimum length required is 2</span>
                    <span ng-show="myForm.uage.$invalid">This field is invalid</span>
                </td>
            </tr>

            <tr>
                <td width="50px">邮件:</td>
                <td>
                    <input type="email" class="usermail" name="umail" ng-model="ctrl.user.mail" required  ng-minlength="3"/>
                </td>
                <td>
                    <span ng-show="myForm.umail.$error.required">This a required field</span>
                    <span ng-show="myForm.umail.$error.minlength">Minimum length required is 3</span>
                    <span ng-show="myForm.umail.$invalid">This field is invalid</span>
                </td>
            </tr>

            <tr>
                <td width="50px">入职日期:</td>
                <td>
                    <input type="date" class="userdate" name="udate" ng-model="ctrl.user.date" required  ng-minlength="8"/>
                </td>
                <td>
                    <span ng-show="myForm.udate.$error.required">This a required field</span>
                    <span ng-show="myForm.udate.$error.minlength">Minimum length required is 8</span>
                    <span ng-show="myForm.udate.$invalid">This field is invalid</span>
                </td>
            </tr>

            <tr>
                <td width="50px">SN:</td>
                <td>
                    <input type="text" class="usersn" name="usn" ng-model="ctrl.user.sn" ng-pattern="/^SN-\d{4}$/"/>
                </td>
                <td>
                    <span ng-show="myForm.udate.$invalid">This field is invalid</span>
                </td>
            </tr>

            <tr>
                <td width="50px">URL:</td>
                <td>
                    <input type="url" class="userurl" name="uurl" ng-model="ctrl.user.url" />
                </td>
                <td>
                    <span ng-show="myForm.uurl.$invalid">This field is invalid</span>
                </td>
            </tr>

            <tr>
                <td ></td>
                <td colspan="2"><input type="submit" value="Submit" ng-disabled="myForm.$invalid"/></td>
                <td>
            </tr>
        </table>
    </form>
 </body>
</html>
<script type="text/javascript">
<!--
    angular.module('notesApp',[])
     .controller('MainCtrl',[function(){
       var self=this;

       self.submit=function(){
            console.log("User name="+self.user.name+
                         " age="+self.user.age+
                         " mail="+self.user.mail+
                         " date="+self.user.date+
                         " sn="+self.user.sn+
                         " url="+self.user.url);
            alert("Form submitted.");
       };

     }]);
//-->
</script>

效果：

要点：

目前我感觉AngularJS对复杂表单的验证不是那么方便，对浏览器的依耐性也强。常规验证的JS代码其实不复杂，AngularJS的优势在此并不明显。

AngularJS的稍复杂form验证的更多相关文章

  1. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  2. bootstrap + angularjs + seajs构建Web Form前端2

    bootstrap + angularjs + seajs构建Web Form前端(二) 回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操 ...

  3. angular实现form验证

    先上效果页面:https://lpdong.github.io/myForm-1/ 其中几个知识点 1.angularJs提供了几个新的type类型: type="password" ...

  4. Nodejs之MEAN栈开发（四）---- form验证及图片上传

    这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/R ...

  5. AngularJS $http配置为form data 提交

    AngularJS $http配置为form data 提交 $scope.formData = {}; $http({ method: 'POST', url: '/user/', // pass ...

  6. Asp.Net Form验证不通过,重复登录

    问题产生根源: 当然,其实应该需要保持线上所有机器环境一致!可是,写了一个小程序.使用的是4.5,aysnc/await实在太好用了,真心不想把代码修改回去. so,动了念头,在这台服务器上装个4.5 ...

  7. tornado web高级开发项目之抽屉官网的页面登陆验证、form验证、点赞、评论、文章分页处理、发送邮箱验证码、登陆验证码、注册、发布文章、上传图片

    本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tornado的后端和ajax的 ...

  8. form验证及图片上传

    form验证及图片上传 这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/ ...

  9. bootstrap + angularjs + seajs构建Web Form前端(1)

    bootstrap + angularjs + seajs构建Web Form前端(一) 简介 Bootstrap是Twitter推出的一个用于前端开发的开源工具包,它由Twitter的设计师Mark ...

随机推荐

  1. redhat--1

    ---------------- ---------------- 免密码ssh远程登录设置 . In host1, copy the ssh-key to the host2 hosts # ssh ...

  2. DWR搭建以及使用教程

    DWR搭建以及使用教程   DWR(Direct Web Remoting)是一个Ajax的开源框架,用于改善web页面与Java类交互的远程服务器端的交互体验,可以帮助开发人员开发包含AJAX技术的 ...

  3. java BigDecimal工具类

    package com.core.calculate; import java.math.BigDecimal; import java.text.DecimalFormat; /** * Creat ...

  4. Moscow Pre-Finals Workshop 2016. Japanese School OI Team Selection. 套题详细解题报告

    写在前面 谨以此篇题解致敬出题人! 真的期盼国内也能多出现一些这样质量的比赛啊.9道题中,没有一道凑数的题目,更没有码农题,任何一题拿出来都是为数不多的好题.可以说是这一年打过的题目质量最棒的五场比赛 ...

  5. [ACG001E] BBQ hard [dp]

    题面: 传送门 思路: 首先,一个暴力的想法 对于每一对pack,求出f(ai+aj,bi+bj),其中f(x,y)=(x+y)!/(x!y!),也就是x个a,y个b的排列方式个数 然后转化模型,将f ...

  6. Mybatis Plugin插件安装破解及使用

    2018年2月更新 2018年2月份,提供一个网上比较多的一个版本V3.21版本,下载资源里面有个已整合版直接解压放入C:\Users\你的用户名\.IntelliJIdea2017.3\config ...

  7. 洛谷 [P3388] 割点模版

    tarjan 求无向图的割点 割点,即割去此点后原图可变为两个或多个独立的联通块 一个点 x 是割点,当且仅当存在一个x 的子节点 y ,使得 low[y] >= dfn[x] 对于根节点来说, ...

  8. Javascript&Html-弹出窗口的屏蔽程序

    大多数的浏览器都内置了弹出窗口的屏蔽程序,即使没有内置此类屏蔽程序的浏览器,用户也可以安装Yahoo tool等带有内置屏蔽程序的应用工具. 结果就是用户可以将绝大多数弹出窗口屏蔽掉. 于是,再弹出窗 ...

  9. js, lambada? 在chrome和node下可以使用

    var a=function(a,c){if(a)c(a)} undefined a(true,(console.log)) VM177:2 Uncaught TypeError: Illegal i ...

  10. 自定义JS类，并扩展其方法和属性

    function CT() { } CT.prototype.P = "TTT"; CT.Test = function () { alert(arguments[0]); }; ...