博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angular 表单验证 基础篇
阅读量:6902 次
发布时间:2019-06-27

本文共 1640 字,大约阅读时间需要 5 分钟。

<div class="nav">

  <h4>表单验证</h4>
  <form ng-app="myApp" name="myForm" novalidate>
    <p>用户名:<br>
      <input type="text" name="user" ng-model="user" ng-minlength="6"
      ng-maxlength="16" ng-pattern="/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){5,11}$/" required>
      <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
        <span ng-show="myForm.user.$error.required">请填写用户名</span>
        <span ng-show="myForm.user.$error.pattern ||
        myForm.user.$error.minlength">用户名以字母开头最小长度6 </span>
      </span>
    </p>
    <p>邮箱:<br>
      <input type="email" name="email" ng-model="email" required>
      <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
        <span ng-show="myForm.email.$error.required">请填写邮箱</span>
        <span ng-show="myForm.email.$error.email">请填写正确邮箱地址</span>
      </span>
    </p>
    <p>手机号码:<br>
      <input type="number" name="number" ng-model="number"
      ng-minlength="11" maxlength="11" required>
      <span style="color:red" ng-show="myForm.number.$dirty && myForm.number.$invalid">
        <span ng-show="myForm.number.$error.number">请输入正确手机号码</span>
        <span ng-show="myForm.number.$error.minlength ||
        myForm.number.$error.maxlength">请输入11位手机号码</span>
      </span>
    </p>
    <p>
      <input type="submit"ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
      myForm.email.$dirty && myForm.email.$invalid ||
      myForm.number.$dirty && myForm.number.$invalid">
    </p>
  </form>
</div>

//js引入

<script type="text/javascript" src="js/angular.min.js" ></script>

转载于:https://www.cnblogs.com/wr1994/p/qiufeng_form.html

你可能感兴趣的文章
软件测试工具MonkeyTalk使用方法
查看>>
使用python进行文件备份
查看>>
《数据结构与抽象:Java语言描述(原书第4版)》一JI2.2.1 延缓处理:throws子句...
查看>>
看,那人好像一个产品狗,对,这就是产品狗
查看>>
《 Java并发编程从入门到精通》 Java线程池的监控
查看>>
《Ansible权威指南》一1.8 Python多环境扩展管理
查看>>
《全栈性能测试修炼宝典 JMeter实战》—第1章 1.5节从招聘要求看岗位价值
查看>>
Gartner2017年十大技术趋势
查看>>
sum() 函数性能堪忧,列表降维有何良方?
查看>>
fastreport 导出图片并打印
查看>>
学习html我们从百度百科开始
查看>>
如何Spring Cloud Zuul作为网关的分布式系统中整合Swagger文档在同一个页面上
查看>>
实现一个炫酷的随机标签排列效果(颜色随机,大小随机,成菱形排列的列表)...
查看>>
flex 布局
查看>>
数字资产交易所开发:平台币快速吸金的背后
查看>>
小程序自定义音频组件,带滚动条,IOS循环失效问题
查看>>
Swift开发之粒子动画的实现
查看>>
我学Java我傲娇
查看>>
挖矿蠕虫肆虐,详解云防火墙如何轻松“制敌”
查看>>
Linux -- Samba之客户端访问(Linux和windows)
查看>>