<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Example - example-example34-production</title>

</head>

<body ng-app="formExample">

  <div ng-controller="ExampleController">

  <form name="form" class="css-form" novalidate>

    姓名:

    <input type="text" ng-model="user.name" name="uName" required="" ng-maxlength="6"/>

    <br />

    <div ng-show="form.$submitted || form.uName.$touched">

      <div ng-show="form.uName.$error.required" style="color:red;">name不能为空</div>

      <div ng-show="form.uName.$error.maxlength" style="color:red;">name最大长度6</div>

    </div>

    手机号:

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

    <br />

    <div ng-show="form.$submitted || form.uphone.$touched">

      <div ng-show="form.uphone.$error.required" style="color:red;">phone不能为空</div>

      <div ng-show="form.uphone.$error.pattern" style="color:red;">手机号格式不正确</div>

    </div>

    邮箱:

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

    <br />

    <div ng-show="form.$submitted || form.uEmail.$touched">

      <span ng-show="form.uEmail.$error.required" style="color:red;">email不能为空</span>

      <span ng-show="form.uEmail.$error.email" style="color:red;">email格式不正确</span>

    </div>

    Gender:

    <input type="radio" ng-model="user.gender" value="male" />male

    <input type="radio" ng-model="user.gender" value="female" />female

    <br />

    <input type="checkbox" ng-model="user.agree" name="userAgree" required="" ng-checked="user.agree"/>

    同意协议

    <br />

    <div ng-show="form.$submitted || !user.agree">

      <div ng-show="!user.agree" style="color:red;">选择同意协议</div>

    </div>

    <input type="submit" ng-click="update(form,user)" value="Save" />

  </form>

</div>

<script src="angular.min.js"></script>

<script type="text/javascript">

(function(angular) {

  'use strict';

angular.module('formExample', [])

  .controller('ExampleController', ['$scope', function($scope) {

     $scope.user={}

     $scope.user.agree=true;

     $scope.update = function(form,user) {

      console.log(form.$invalid);

      console.log(user);

      if(form.$valid){

      }

    };

  }]);

})(window.angular);

</script>

</body>

</html>

angular form 验证的更多相关文章

  1. angular form 验证 ngMessage

    <!DOCTYPE HTML> <html ng-app="deliciousApp"> <head> <meta charset=&qu ...

  2. angular实现form验证

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

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

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

  4. 细说angular Form addControl方法

    在本篇博文中,我们将接触angular的验证.angular的验证是由form 指令和ngModel协调完成的.今天博主在这里想要说的是在验证在的一种特殊情况,当验证控件没有没有name属性这是不会被 ...

  5. form验证及图片上传

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

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

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

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

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

  8. Python Django的分页，Form验证，中间件

    本节内容 Django的分页 Form 中间件 1 Django 分页 1.1 Django自带的分页 1.首先来看下我的测试数据环境 ############ models.py ######### ...

  9. Django中Form验证

    Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 一,Form验证 第一种操作:主要是这三个函数 ...

随机推荐

  1. JS中数组对象去重

    JS数组去重 JS中对数组去重最好不要用unique方法,该方法主要是对dom节点数组的去重,如果对普通的数组元素去重只会去掉与之相邻的重复元素,也就是如果数组中还有不相邻的重复元素存在,将不会被去掉 ...

  2. node中定时器的“先进”用法

    var DSQ = setInterval(function(){ console.log('zzq'); },1000); setTimeout(function(){ clearInterval( ...

  3. ios证书

    内容提要: 安装app时提示 “无法下载应用,此时无法安装“XXX””.我遇到过多次是由于ios的app出现证书问题.本篇文章讲解用ios证书制作过程,以及每个步骤的解释. 正文: Xcode签名至少 ...

  4. C# 时间与时间戳互转 13位

    /// <summary> /// 将c# DateTime时间格式转换为Unix时间戳格式 /// </summary> /// <param name="t ...

  5. 如何做好多语言（小语种）网站SEO

    摘自http://www.life-cream.com/how-to-do-multi-language-seo/ 这篇文章在今年4月就开了头,一直到今天才把坑填好,我是有多懒.在动笔之前本来有个前缀 ...

  6. XLST

    xlst转换 // 读入源请求和mapping配置 StreamSource xmlSource = new StreamSource(new InputStreamReader(new ByteAr ...

  7. LeetCode Peeking Iterator

    原题链接在这里:https://leetcode.com/problems/peeking-iterator/ 题目: Given an Iterator class interface with m ...

  8. 优化系统资源ulimit《高性能Linux服务器构建实战：运维监控、性能调优与集群应用》

    优化系统资源ulimit<高性能Linux服务器构建实战:运维监控.性能调优与集群应用> 假设有这样一种情况,一台Linux 主机上同时登录了10个用户,在没有限制系统资源的情况下,这10 ...

  9. ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项

    首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...

  10. JSP常用标签——JSTL标签和EL表达式

    一.JSTL简介 1.什么是JSTL JSTL是Java中的一个定制标记库集.(这个标记库集不需要自己编写,可以直接使用) 2.为什么要使用JSTL 实现了JSP页面中的代码复用(基于标签库原理,重复 ...