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>
效果:
输入前:
输入后:
AngularJS的简单表单验证的更多相关文章
- AngularJS中的表单验证
AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...
- angularJS中的表单验证(包括自定义验证)
表单验证是angularJS一项重要的功能,能保证我们的web应用不会被恶意或错误的输入破坏.Angular表单验证提供了很多表单验证指令,并且能将html5表单验证功能同他自己的验证指令结合起来使用 ...
- JS简单表单验证
这里我是写了一个简单的注册表单验证功能,亲测有效,一起来看看吧! 首先我的HTML代码是这样的: class大家可以忽略一下,这里我项目使用的是bootstrap的样式. 输入用户名和密码用的是正则表 ...
- 如何利用jQuery进行简单表单验证
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name=&qu ...
- AngularJS入门基础——表单验证
<form name="form" novalidata> <label name="email">your email</l ...
- jq之简单表单验证
<body> <form method="post" action=""> <div class="int"& ...
- 自制简单表单验证relative与absolute定位
html结构,用到了label与span <label class="relative"><input type="text" name=&q ...
- 夺命雷公狗—angularjs—2—模拟表单验证
这里我们就来借助妹子ui来搭建下模版,废话不多说,代码如下图所示: <!doctype html> <html lang="en"> <head> ...
- 关于ajax用户名验证和jquery实现简单表单验证
首先来说用户名验证: 前台: <tr> <td class="tableleft">教师编号</td> <td><input ...
随机推荐
- day01_08.三大控制结构
编程三要素:变量,运算,控制 控制: 有选择性的控制让你某部分代码执行,某部分不执行,或者来回反复执行某段代码 控制的三种基本机构:顺序,选择,循环 1.顺序 程序从上到下,顺序执行 <?php ...
- 安装python包
开始--cmd pip install pymongo 直到最后给出提示successfull install pymongo-**(版本号,最新的)
- verilog 实现中值滤波
图像信号在形成.传输和记录的过程中,由于成像系统.传输介质.工作环境和记录设备等的固有缺陷,不可避免地产生各种类型的噪声,降低了图像的质量,进而影响后续处理(如边缘检测.图像分割.特征提取.模式识别等 ...
- Timer和TimerTask详解
1.概览 Timer是一种定时器工具,用来在一个后台线程计划执行指定任务.它可以计划执行一个任务一次或反复多次.TimerTask一个抽象类,它的子类代表一个可以被Timer计划的任务. 简单的一个例 ...
- Welcome-to-Swift-17自判断链接(Optional Chaining)
自判断链接(Optional Chaining)是一种可以请求和调用属性.方法及子脚本的过程,它的自判断性体现于请求或调用的目标当前可能为空(nil).如果自判断的目标有值,那么调用就会成功:相反,如 ...
- gcd-模板+最小公倍数
#include<iostream> #include<cstdio> #include<algorithm> using namespace std; int G ...
- Rust 内存管理
Rust 内存管理 Rust 与其他编程语言相比,最大的亮点就是引入了一套在编译期间,通过静态分析的方式,确定所有对象的作用域与生命周期,从而可以精确的在某个对象不再被使用时,将其销毁,并且不引入任何 ...
- HDU——2068RPG的错排(错排公式)
RPG的错排 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...
- HDU——1003Max Sum(子序列最大和)
Max Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Su ...
- Java连接SQLite数据库
下载java包:sqlite-jdbc-3.7.2.jar,放到java工程目录lib下 如下代码实例: import java.sql.*; import org.sqlite.JDBC; /** ...