angular form 验证

时间：2022-09-19 10:20:53
<!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&quot ...

  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&period;Net Form验证不通过&comma;重复登录

    问题产生根源: 当然,其实应该需要保持线上所有机器环境一致!可是,写了一个小程序.使用的是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. poj3371

    Flesch Reading Ease Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 2269 Accepted: 710 De ...

  2. Practical Machine Learning For The Uninitiated

    Practical Machine Learning For The Uninitiated Last fall when I took on ShippingEasy's machine learn ...

  3. android项目实战 --ListView 头部ViewPager广告轮询图效果

    看开源框架:https://github.com/tianshaojie/AndroidFine,里面有如下效果,特记录学习下,以后项目中用也好能够立刻想起来.   如上面所示,是常见项目中的图片轮训 ...

  4. 开涛spring3&lpar;5&period;1&amp&semi;5&period;2&rpar; - Spring表达式语言 之 5&period;1 概述 5&period;2 SpEL基础

    5.1  概述 5.1.1  概述 Spring表达式语言全称为“Spring Expression Language”,缩写为“SpEL”,类似于Struts2x中使用的OGNL表达式语言,能在运行 ...

  5. APNS导致消息丢失和发送效率原因

    http://blog.csdn.net/tlq1988/article/details/9612237 首先说明一下,本文只是介绍一些容易被开发者忽视,而导致性能低下问题.并不是介绍如何向苹果设备成 ...

  6. Linux中DHCP服务器的简单配置

    我安装了两台linux系统,一个作为服务器,一个客户端 两个都有3个网卡, 后两个网卡聚合为zhi一个网卡:Linux 网卡聚合 两台电脑都一样. 那么如何为这个聚合网卡进行DHCP的分配呢? 1.由 ...

  7. 移动Web UI库（H5框架）

    1.Framework7 Framework7 - is a free and open source mobile HTML framework to develop hybrid mobile a ...

  8. 在Eclipse中利用maven整合搭建ssm框架

    首先说明用到的框架: spring  +  springMVC  +  mybatis 构建工具:maven 开发工具:eclipse 开发环境:win10      java版本:jdk1.8    ...

  9. sublime text 3 3143

    下载链接:https://download.sublimetext.com/Sublime%20Text%20Build%203143%20x64%20Setup.exe 注册信息:sublime t ...

  10. Spring Cloud OAuth2（一） 搭建授权服务

    概要 本文内容主要为spring cloud 授权服务的搭建,采用jwt认证. GitHub 地址:https://github.com/fp2952/spring-cloud-base/tree/m ...

相关文章