angularjs的表单验证

angularjs的表单验证

废话:angular的热度在减小,但是老项目依旧是angular的,就是不能丢,得会

干活直接上代码  <!DOCTYPE html>

<html>
<head><!-- CSS --><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" /><style>body     { padding-top:30px; }button {background-color: #4CAF50;border: none;color: white;padding: 10px 20px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;border-radius: 5px;}button:hover {background-color: rgb(113, 173, 115);}button:focus {background: rgb(156, 207, 156);outline: none;}button[disabled] {background: rgb(116, 119, 116)}</style><!-- JS --><script src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script><script>var validationApp = angular.module('validationApp', []);validationApp.controller('mainController', function($scope) {$scope.submitForm = function(isValid) {if (isValid) {$('URL',data,function(result){
                ....
            })
            return false}};});</script> </head> <body ng-app="validationApp" ng-controller="mainController"> <div class="container"><div class="page-header"><h1>AngularJS Form Validation</h1></div><form name="userForm" novalidate><!-- NAME --><div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid}"><label>Name*</label><input type="text" name="name" class="form-control" ng-model="Sname" ng-pattern="/ab{2,}/" required><p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">要的是abb</p></div><!-- USERNAME --><div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }"><label>Username</label><input type="text" name="username" class="form-control" ng-model="Susername" ng-minlength="3" ng-maxlength="8" required><!-- <input type="text" name="username" class="form-control" ng-model="user.username" ng-pattern="/^[a-zA-Z0-9]|[._]/" required> --><p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p><p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p><!-- <p ng-show="userForm.username.$error.pattern" class="help-block">数字,字母 或者 ._ </p> --></div><!-- EMAIL --><div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }"><label>Email</label><input type="email" name="email" class="form-control" ng-model="Demail" required><p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p></div><button type="button" class="btn btn-primary" ng-disabled="userForm.$invalid" ng-click="submitForm(userForm.$valid)">Submit</button>
</form>
</div>
</body>
</html>

  注意:这里是表单提交 如果上述红色部分不写 或者是 type=“submit“ 在提交页面的时候 ,我们需要的ajax的效果没办法展示,会直接刷新。

      处理用 button的 类型,也可以在 ajax 提交的 代码中最后 return false 

对于angularjs 的解释:

  ng 指令绑定表单,上面的蓝色部分都是必不可少的;

 

  novalidate ,禁止使用表单的默认提交,采用我们ajax的提交方式
userForm 必需的表单name 后面要绑定到这个form name 属性
   ng-pattern="/ab{2,}/" 可以单独为 input 的表单做正则验证,如果不正确就会触发下面的ng-show
   ng-show="userForm.name.$invalid && !userForm.name.$pristine" 错误信息的展示条件 

  <input type="text" name="name" class="form-control" ng-model="Sname" ng-pattern="/ab{2,}/" required>
   <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">要的是abb</p>ng 是通过name 属性关联起来的,input 里面的name 和对应表单里面的格式验证 name 要一致;
name="name" 必须的input 的那么属性   
ng-model="Sname" 必须要的model 不然绑定不到  ,可以不和name的名字一致
 所有的input 都有required的属性 表示表单必填    
ng-disabled="userForm.$invalid" 表示按钮的是否点击状态 取决于表单是否都已经填写  
 

 

  
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>button {background: green;width: 100px;height: 20px;}button[disabled] {background: rgb(116, 119, 116)}</style>
</head>
<body ng-app="validationApp" ng-controller="mainController"><script src="https://cdn.bootcss.com/jquery/1.12.2/jquery.js"></script><script src="https://cdn.bootcss.com/angular.js/1.5.5/angular.js"></script><script>var validationApp = angular.module('validationApp', []);validationApp.controller('mainController', function($scope) {console.log(regForm.phone.$pristine)$scope.submitForm = function(isValid) {console.log(111);$scope.regForm.already = true;if (isValid) {console.log($scope.rphone)console.log($scope.rsmg)console.log($scope.rpwd)return false}};});</script><div><h3>注册</h3><form  name="regForm" novalidate><div><label>正确的手机号</label><input type="text" name="phone" ng-model="rphone" ng-pattern="/[0-9]{11}/" required /><p ng-show="regForm.phone.$invalid &&  !regForm.phone.$pristine">请输入正确的手机号</p><p ng-show="regForm.already">手机已经注册</p></div><div><label>请输入4手机code</label><input type="text" name="smg" ng-model="rsmg" ng-pattern="/[0-9]{4}/" required /><p ng-show="regForm.smg.$invalid &&  !regForm.smg.$pristine">请输入4手机code</p></div><div><label>11pwd</label><input type="text" name="pwd" ng-model="rpwd" ng-pattern="/[0-9]{6,11}/" required /><p ng-show="regForm.pwd.$invalid &&  !regForm.pwd.$pristine">请输入6-11pwd</p></div><button type="button"  ng-disabled="regForm.$invalid" ng-click="submitForm(regForm.$valid)">Submit</button> </form></div></body>
</html>

 

 
  

转载于:https://www.cnblogs.com/adouwt/p/9450554.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/465307.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

越老越值钱,除了程序员!

-我们见过太多靠经验、资历“镀金”的职业。司机、教师、医生、律师、会计……这些职业的薪资待遇、社会地位、声誉等等都会随着从业时间的增长而变得越来越高、越来越好。“老”这个字&#xff0c;对于这类的职业来说&#xff0c;更像是褒奖。大家对于“资深”的他们&#xff…

Visual Studio 2010授权修改

为什么80%的码农都做不了架构师&#xff1f;>>> 参见以下步骤&#xff1a; 32位的系统中&#xff0c;修改以下注册表键值 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\10.0\Registration\UserName HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\Curr…

Net Core平台灵活简单的日志记录框架NLog+SqlServer初体验

Net Core平台灵活简单的日志记录框架NLogSqlServer初体验 前几天分享的"[Net Core平台灵活简单的日志记录框架NLogMysql组合初体验][http://www.cnblogs.com/yilezhu/p/9416439.html]" 反响还行。有网友就说有了NLogMySql的组合&#xff0c;那如果我是用SqlServer怎么…

从单片机步入Linux之文件系统的构建

大家好&#xff0c;我是情报小哥&#xff01;本文为【从单片机步入嵌入式Linux】系列文章的第四篇文章&#xff0c;前面三篇大家有时间也可以回头阅读一下&#xff0c;本系列文章的很多知识我都会从裸机开发和理解的角度来分析&#xff0c;帮助大家迅速理解Linux系统相关的知识…

pythongui界面小程序_python界面小程序

Python支持多種圖形界面的第三方庫&#xff0c;包括&#xff1a;TkwxWidgetsQtGTK等等。但是Python自帶的庫是支持Tk的Tkinter&#xff0c;使用Tkinter&#xff0c;無需安裝任何包&#xff0c;就可以直接使用。本章簡單介紹如何使用Tkinter進行GUI編程。Tkinter我們來梳理一下概…

关于Linq to SQL 的“异常详细信息: System.InvalidCastException: 指定的转换无效。”

开发环境&#xff1a;VS2010,SQL Server2005,Windows7,使用LINQ to SQL作为ORM 运行环境&#xff1a;Windows2003(IIS6),.NET 3.5 SP1,SQL Server2000 症状&#xff1a;开发环境下一切正常&#xff0c;在运行环境中出现如下错误&#xff1a; 代码 指定的转换无效。 说明: 执行当…

由百度 “PHP薪资” 引发的思考

昨天晚上睡觉的时候百度了一下 “PHP薪资”&#xff0c;看到了各种各样的答案&#xff0c;从百度知道到知乎&#xff0c;再到各个论坛……答案也是从 2k-16k 不等&#xff08;不过说实话&#xff0c;2k是吓到我了&#xff09;&#xff0c;其中一些答案说到了在中国从事某一行业…

哈希存储 java_Java容器系列之HashMap的存储

Java容器系列之HashMap概要本文将结合Java源码总结HashMap的存储结构及其扩容策略&#xff0c;并根据这些特点给出使用HashMap的最佳实践。本文不再介绍HashMap的基本使用&#xff0c;有需要的请先学习下Java容器的基础知识。存储结构HashMap的核心问题是如何保证读写的速度&am…

你增长的年龄,是因为丢掉了快乐吗?

这是周末&#xff0c;想写一篇文章给自己的一个朋友&#xff0c;试看能否解开他不安的情绪。我朋友是我真的朋友几年前我还是很害羞的我&#xff0c;有一次开技术会上&#xff0c;他公开的介绍了我&#xff0c;我觉得是一种认可&#xff0c;当然&#xff0c;也不会有一个不喜欢…

redhat5中架设DHCP服务器与DHCP中继

作者&#xff1a;奇异果Wickey Email&#xff1a;hkb178149081163.com 实验平台&#xff1a;VMvare 系统&#xff1a;RedHat5 软件包&#xff1a;DHCP-3.0.5 模拟需求分析&#xff1a;&#xff08;暂无&#xff09; 拓扑图&#xff1a; 1. 配置DHCPServer IP与GW 2. 安装DHCP…

linux下安装jdk_mysql_tomcat_redis

目前搬我以前的笔记,每个人做笔记方式都不一样,看别人的风格,生成自己的风格1.linux安装软件和redis学习jdk --- java开发运行环境Tomcat - WEB程序的服务器Mysql -- 持久化存储数据Redis -- 数据库 &#xff0c;和MySQL原理不同//linux通用软件安装流程&#xff1a;(jdk安装)…

MCU HardFault问题查找和破解方法

一、HardFault产生原因和常规分析方法二、HardFault解决方法分析三、HardFault回溯的原理四、操作分析流程&#xff1a;1. 心里明白徒手分析法2. CmBacktrace 天龙大法五、总结一、HardFault产生原因和常规分析方法在嵌入式开发中&#xff0c;偶尔会遇到Hard Fault死机的异常&…

centos8 apache php,centos6.8安装php7 for Apache2

1&#xff0c;php for nginx就不用说了&#xff0c;我们的博客里面应该有写。 2&#xff0c;直接源码安装&#xff0c;安装apache&#xff0c;安装php7&#xff0c;安装mysql。除了麻烦一点&#xff0c;应该没什么问题。 3&#xff0c;yum的方式安装了apache和mysql&#xff0c…

php 逗号 分割字符串

介绍两个函数给你 <?php //利用 explode 函数分割字符串到数组 $source "hello1,hello2,hello3,hello4,hello5";//按逗号分离字符串 $hello explode(,,$source); for($index0;$index<count($hello);$index){ echo $hello[$index];echo "</br>&qu…

ASP.NET Core的身份认证框架IdentityServer4--入门【转】

原文地址 Identity Server 4是IdentityServer的最新版本&#xff0c;它是流行的OpenID Connect和OAuth Framework for .NET&#xff0c;为ASP.NET Core和.NET Core进行了更新和重新设计。在本文中&#xff0c;我们将快速了解IdentityServer 4存在的原因&#xff0c;然后直接进入…

Linux 中的各种栈:进程栈 线程栈 内核栈 中断栈

栈是什么&#xff1f;栈有什么作用&#xff1f;首先&#xff0c;栈 (stack) 是一种串列形式的 数据结构。这种数据结构的特点是 后入先出 (LIFO, Last In First Out)&#xff0c;数据只能在串列的一端 (称为&#xff1a;栈顶 top) 进行 推入 (push) 和 弹出 (pop) 操作。根据栈…

php session警告屏蔽,PHP Session的一个警告

警告全文如下:PHP Warning: Unknown: Your script possibly relies on a session side-effectwhich existed until PHP 4.2.3. Please be advised that the session extension doesnot consider global variables as a source of data, unless register_globals is enabled.You…

flex item的width VS flex-basis

flexbox的子元素flex item的宽度&#xff0c;按照以下规则计算&#xff1a;content>width>flex-basis(limited by max/min-width)flex-basis的缺省值为auto&#xff1b;如果flex-basis的值为auto&#xff0c;那么flex item的宽度由width属性决定&#xff1b;如果没有设置…

内核抢占会让内核调度更好吗?

大家好&#xff0c;我是老吴的朋友&#xff0c;这篇文章转发自老吴的公众号。今天要分享的是抢占相关的基础知识。本文以内核抢占为引子&#xff0c;概述一下 Linux 抢占的图景。我尽量避开细节问题和源码分析。什么是内核抢占&#xff1f;别急&#xff0c;咱们慢慢来。先理解抢…

php 解压dat,电脑微信dat文件怎么打开

微信dat转码软件使用操作说明在线解码,各位同学下载软件后&#xff0c;如何操作?如何找到dat文件?如何使用?又有哪些注意事项呢?这里会为大家一一道来。问题1 &#xff1a;如果下载失败怎么办?请先检查网络&#xff0c;软件并没有放在我的网站上&#xff0c;而是放在大厂七…