AngularJS的简单表单验证

简介:

代码下载:https://files.cnblogs.com/files/xiandedanteng/angularjsCheckSimpleForm.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>
    <meta charset="utf-8">
    <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><input type="text" name="uname" ng-model="ctrl.user.username" 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><input type="password" name="pwd" ng-model="ctrl.user.password" required/></td>
                <td>
                    <span ng-show="myForm.pwd.$error.required">This a required field</span>
                </td>
            </tr>
            <tr>
                <td><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("Username="+self.user.username+" Password="+self.user.password);
            alert("Form submitted.");
       };
       
     }]);
//-->
</script>
复制代码

效果:

输入前:

输入后:

 














本文转自张昺华-sky博客园博客,原文链接:http://www.cnblogs.com/xiandedanteng/p/7418300.html,如需转载请自行联系原作者

相关文章
|
机器学习/深度学习 自然语言处理 机器人
【RAG实践】基于LlamaIndex和Qwen1.5搭建基于本地知识库的问答机器人
LLM会产生误导性的 “幻觉”,依赖的信息可能过时,处理特定知识时效率不高,缺乏专业领域的深度洞察,同时在推理能力上也有所欠缺。
冒泡排序(java)
冒泡排序(java)
|
8月前
|
存储 人工智能 算法
【深度优先搜索篇】走迷宫的魔法:算法如何破解迷宫的神秘密码
【深度优先搜索篇】走迷宫的魔法:算法如何破解迷宫的神秘密码
|
11月前
|
安全 Linux 网络安全
Linux 开放的端口太多了?教你一招找出所有开放的端口,然后直接干掉!
在 Linux 系统中,端口管理至关重要。本文介绍了如何使用 `netstat`、`lsof` 和 `nmap` 等工具查找开放端口,并通过关闭相关服务、修改防火墙规则或禁用网络接口来关闭这些端口,以提高系统安全性。注意不要随意关闭重要端口,谨慎操作并备份数据。
313 3
|
11月前
|
Kubernetes Cloud Native 开发者
云原生技术入门:Kubernetes和Docker的协作之旅
【10月更文挑战第22天】在数字化转型的浪潮中,云原生技术成为推动企业创新的重要力量。本文旨在通过浅显易懂的语言,引领读者步入云原生的世界,着重介绍Kubernetes和Docker如何携手打造弹性、可扩展的云环境。我们将从基础概念入手,逐步深入到它们在实际场景中的应用,以及如何简化部署和管理过程。文章不仅为初学者提供入门指南,还为有一定基础的开发者提供实践参考,共同探索云原生技术的无限可能。
199 3
|
分布式计算 Kubernetes 大数据
为什么说大数据和云计算的深度融合是大势所趋?
为什么说大数据和云计算的深度融合是大势所趋?
为什么说大数据和云计算的深度融合是大势所趋?
|
机器学习/深度学习 算法 搜索推荐
【视频】支持向量机算法原理和Python用户流失数据挖掘SVM实例(上)
【视频】支持向量机算法原理和Python用户流失数据挖掘SVM实例
|
Java 测试技术 API
Java RESTful中的PUT请求:资源的更新与完整替换
在RESTful架构中,PUT请求是一种用于更新或完整替换资源的重要操作。PUT请求允许客户端发送数据到服务器,以更新已有资源的状态,或者用新数据完全替换旧资源。本文将引导您深入了解Java中使用PUT请求构建RESTful API,探讨其特点、实现方式、用例以及在实际应用中的优势。
|
Linux
Linux操作系统选择题之文件权限
Linux操作系统选择题之文件权限
380 0
|
定位技术 图形学
窥探他人眼中的世界:用眼睛反光重建3D场景,《黑镜》走进现实
窥探他人眼中的世界:用眼睛反光重建3D场景,《黑镜》走进现实
203 0