<!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. Android.mk学习 笔记

    感谢: 原创作品 转载请注明出处:http://www.cnblogs.com/langlang/ 作者email: dayhappyhappy@163.com LOCAL_PATH := $(cal ...

  2. 解决Eclipse启动报错Failed to create the Java Virtual Machine

    电脑:2G内存,WIN7 32位. 启动adt-bundle-windows-x86-20140702\eclipse\eclipse.exe时,报错[Failed to create the Jav ...

  3. Selenium2学习-000-Selenium2初识

    什么是 Selenium?Selenium 是 ThoughtWorks 专门为 Web 应用程序编写的一个验收测试工具,是一种 Web 测试框架,开拓了验证 Web 应用程序的新方案,使您可在 We ...

  4. python 递归

    学习python,正好用一个例子练习一下递归. 参考文档: http://www.runoob.com/python/python-exercise-example18.html 题目:求s=a+aa ...

  5. No mapping found for HTTP request with URI [] in DispatcherServlet with name 'appServlet'

    项目是使用SpringMVC (1)在浏览器中访问,后台总报错: No mapping found for HTTP request with URI [] in DispatcherServlet ...

  6. 手机端input[type=date]的时候placeholder不起作用解决方案

    目前PC端对input 的date类型支持不好,我试下来的结果是只有chrome支持.firefox.IE11 都不支持.而且PC端有很多日历控件可供使用.就不去多考虑这点了. 那么在移动端的话,io ...

  7. Android 使用Okhttp/Retrofit持久化cookie的简便方式

    首先cookie是什么就不多说了,还是不知道的话推荐看看这篇文章 Cookie/Session机制详解 深入解析Cookie技术 为什么要持久化cookie也不多说了,你能看到这篇文章代表你有这个需求 ...

  8. Android SnapHelper

    转载请注明出处:http://blog.csdn.net/crazy1235/article/details/53386286 SnapHelper 是 Android Support Library ...

  9. Java开发遇到的问题及解决方案

    一.java.lang.OutOfMemoryError 问题:myeclipse 内存不足,又显示内存溢出等问题怎么回事?( java.lang.OutOfMemoryError: PermGen ...

  10. 6、JavaScript进阶篇③——浏览器对象、Dom对象

    一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...