一、查看$scope -->寻找Form控制变量的位置

Form控制变量 格式：form的name属性.input的name属性.$...

  • formName.inputField.$pristine 字段是否 未更改
  • formName.inputField.$dirty 字段是否 更改
  • formName.inputField.$valid 字段 有效
  • formName.inputField.$invalid 字段 无效
  • formName.inputField.$error 字段 错误信息

问题

为什么要按照上面的格式写才能找到对应的变量从而正确表达字段的一些验证信息呢？我们通过下面程序调试。

调试过程

html

  1.    <div ng-app="AppKe" >
  2. 		<div  ng-controller="OuterController">
  3. 			<form novalidate name="formKe" >
  4. 				<input type="text" name="userName" value="" ng-model="user.name" />
  5. 			</form>
  6. 		</div>
  7. 	</div>

javasript

  1. angular.module('AppKe', [])
  2. .controller('OuterController', function($scope){
  3. 	$scope.user = {
  4. 		name: '李可'
  5. 	}
  6. 	console.log($scope);
  7. })

结果 Gif 时间：30s

结论

从上图中，我们清楚地了解到：这几个控制变量在哪里了吧。这个确实有点考验我了~刚开始研究。

解释

form具有这些变量，form内的元素也继承这些。（个人理解）。$scope当前控制器的最高的作用域。

二、表单中特定的input属性

  1. form：有个name属性 novalidate 去除h5自带的验证
  2. name 名字
  3. ng-model 绑定的数据
  4. ng-required 是否必填 注意和required区别
  5. ng-minlength   ng-maxlength 最小、最大长度
  6. ng-pattern 匹配模式
  7. email
  8. url
  9. number
  10. ng-change 值变化的回调

三、表单中特定的CSS 类选择器，下文中没用，用了bootstrap样式

  1. ng-valid //有效时的类样式名字.
  2. ng-invalid //无效时的类样式名字.
  3. ng-pristine  //未更改的类样式名字.
  4. ng-dirty  //更改的类样式名字.
  5. ng-submitted //提交后的类样式名字.

这个可以在官网查到：https://code.angularjs.org/1.3.0/docs/api/ng/directive/form

四、进入完成的一个表单

资源

  • css地址 http://v3.bootcss.com/css/#forms

form提交验证。只会验证表单元素的required属性。其余不验证。

required和ngrequired相反。required页面加载的时候就自动验证=true。

html

  1. <div ng-app="AppKe"  style="margin-top:50px;">
  2. 	<div  ng-controller="OuterController">
  3. 		<form novalidate name="formKe"  class="form-horizontal container">
  4. 			<div class="form-group" ng-class="{'has-error':formKe.userName.$invalid}">
  5. 				<label for="userIDTxt" class="control-label col-sm-2 ">用户名</label>
  6. 				<div class="col-sm-10">
  7. 					<input type="text" name="userName" class="form-control" id="userIDTxt" placeholder="用户名" ng-minlength="2" ng-maxlength="10" ng-required="true" ng-model="user.name"/>
  8. 					<div class="alert alert-danger help-block" ng-show="formKe.userName.$error.minlength">用户名最小长度2</div>
  9. 					<div class="alert alert-danger help-block" ng-show="formKe.userName.$error.maxlength" >用户名最大长度10</div>
  10. 					{{formKe.userName.$error}}
  11. 				</div>
  12. 			</div>
  13. 		</form>
  14. 	</div>
  15. </div>

javascript

  1. angular.module('AppKe', [])
  2. .controller('OuterController', function($scope){
  3. })

结果

分析

页面刚加载好，不应该haserror类样式名：

  • 对应的 ng-class="{'has-error':formKe.userName.$invalid}"表示：冒号后面的表达式为真的时候，元素才具有has-error类样式

    • 写法注意：注意写成json对象的格式，类样式名要单引号
    • 应该是表单元素有验证没通过，并且该元素更改过才会触发。ng-class="{'has-error':myForm.username.$dirty && myForm.username.$invalid}"
  • 有最大最小值，不用ng-required="true"

完整表单

html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<meta charset="utf-8">
  5. 	<script src="ddd/angular.js"></script>
  6. 	<script type="text/javascript"  src="formKe.js"></script>
  7. 	<link rel="stylesheet" type="text/css" href="framework/bootstrap/css/bootstrap.css"></link>
  8. </head>
  9. <body>
  11. <div ng-app="AppKe"  style="margin-top:50px;">
  12. 	<div  ng-controller="OuterController">
  13. 		<!--这些提示的信息首次加载的时候，minlength- maxlength - email都为false-->
  14. 		<form  name="formKe" novalidate class="form-horizontal container">
  15. 			<div class="form-group" ng-class="{'has-error':formKe.userName.$dirty && formKe.userName.$invalid}">
  16. 				<label for="userIDTxt" class="control-label col-sm-2 ">*用户名</label>
  17. 				<div class="col-sm-10">
  18. 					<input type="text" name="userName" class="form-control" id="userIDTxt" placeholder="用户名" ng-minlength="2" ng-maxlength="10" ng-model="user.name" required/>
  19. 					<div class="alert alert-danger help-block" ng-show="formKe.userName.$dirty&&formKe.userName.$error.required">必填项</div>
  20. 					<div class="alert alert-danger help-block" ng-show="formKe.userName.$dirty&&formKe.userName.$error.minlength">用户名最小长度2</div>
  21. 					<div class="alert alert-danger help-block" ng-show="formKe.userName.$dirty&&formKe.userName.$error.maxlength" >用户名最大长度10</div>
  22. 					错误$error：{{formKe.userName.$error}}++改动过$dirty：{{formKe.userName.$dirty}} ++验证没通过$invalid：{{formKe.userName.$invalid}}
  23. 				</div>
  24. 			</div>
  25. 			<div class="form-group" ng-class="{'has-error':formKe.userPwd.$dirty && formKe.userPwd.$error.minlength}">
  26. 				<!--formKe.userName.$invalid代替formKe.userPwd.$error.minlength-->
  27. 				<label for="userPwd" class="control-label col-sm-2 ">*密码</label>
  28. 				<div class="col-sm-10">
  29. 					<input type="password" name="userPwd" class="form-control" id="userPwd" placeholder="密码" ng-minlength="6"  ng-model="user.userPwd" required/>
  30. 					<div class="alert alert-danger help-block" ng-show="formKe.userPwd.$dirty&&formKe.userPwd.$error.minlength">必填项，最小长度6</div>
  31. 					错误$error：{{formKe.userPwd.$error}}++改动过$dirty：{{formKe.userPwd.$dirty}} ++验证没通过$invalid：{{formKe.userPwd.$invalid}}
  32. 				</div>
  33. 			</div>
  34. 			<div class="form-group" ng-class="{'has-error':formKe.userPwd.$dirty&&formKe.pwdConfirm.$dirty&&user.userPwd!=user.pwdConfirm}">
  35. 				<label for="pwdConfirm" class="control-label col-sm-2 ">*确认密码</label>
  36. 				<div class="col-sm-10">
  37. 					<input type="password" name="pwdConfirm" class="form-control" id="pwdConfirm" placeholder="确认密码"  ng-model="user.pwdConfirm" required/>
  38. 					<div class="alert alert-danger help-block" ng-show="formKe.pwdConfirm.$dirty&&formKe.pwdConfirm.$dirty&&user.userPwd!=user.pwdConfirm">密码与确认密码不一致</div>
  39. 					错误$error：{{formKe.pwdConfirm.$error}}++改动过$dirty：{{formKe.pwdConfirm.$dirty}} ++验证没通过$invalid：{{formKe.pwdConfirm.$invalid}}
  40. 				</div>
  41. 			</div>
  42. 			<div class="form-group" ng-class="{'has-error':formKe.userEmail.$dirty&&formKe.userEmail.$invalid}">
  43. 				<label for="userEmail" class="control-label col-sm-2 ">邮箱</label>
  44. 				<div class="col-sm-10">
  45. 					<input type="email" name="userEmail" class="form-control" id="userEmail" placeholder="邮箱"  ng-model="user.userEmail" ng-minlength="7" ng-maxlength="35"/>
  46. 					<div class="alert alert-danger help-block" ng-show="formKe.userEmail.$dirty&&formKe.userEmail.$error.minlength">长度不得少于7位</div>
  47. 					<div class="alert alert-danger help-block" ng-show="formKe.userEmail.$dirty&&formKe.userEmail.$error.maxlength">长度不得超过35位</div>
  48. 					<div class="alert alert-danger help-block" ng-show="formKe.userEmail.$dirty&&formKe.userEmail.$error.email">格式不正确</div>
  49. 					<!--type='email',也会在formKe.userEmail.$error生成$error.email-->
  50. 					<!--formKe.userEmail.$error.pattern此处代替，但对应ng-pattern指令一定加上 ng-pattern="/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/"/，这样依然生成$error.email，但一直未false，不造成影响-->
  51. 					错误$error：{{formKe.userEmail.$error}}++改动过$dirty：{{formKe.userEmail.$dirty}} ++验证没通过$invalid：{{formKe.userEmail.$invalid}}++非邮箱：{{formKe.userEmail.$error.email}}
  52. 				</div>
  53. 			</div>
  54. 			<div class="form-group" ng-class="{'has-error':formKe.userSite.$dirty&&formKe.userSite.$invalid}">
  55. 				<label for="userSite" class="control-label col-sm-2 ">*个人网址</label>
  56. 				<div class="col-sm-10">
  57. 					<input type="url" name="userSite" class="form-control" id="userSite" placeholder="个人网址"  ng-model="user.userSite" required/>
  58. 					<div class="alert alert-danger help-block" ng-show="formKe.userSite.$dirty&&formKe.userSite.$error.url">格式不正确</div>
  59. 					<!--required',也会在formKe.userEmail.$error生成$error.required，页面首次加载，就为true，所以加上formKe.userSite.$dirty-->
  60. 					<!--type='url',也会在formKe.userEmail.$error生成$error.url-->
  61. 					错误$error：{{formKe.userSite.$error}}++改动过$dirty：{{formKe.userSite.$dirty}} ++验证没通过$invalid：{{formKe.userSite.$invalid}}++非网址{{formKe.userSite.$error.url}}++没填写{{formKe.userSite.$error.required}}
  62. 				</div>
  63. 			</div>
  64. 			<div class="form-group" ng-class="{'has-error':formKe.userSite2.$dirty&&formKe.userSite2.$invalid}">
  65. 				<label for="userSite2" class="control-label col-sm-2 ">个人网址2</label>
  66. 				<div class="col-sm-10">
  67. 					<input type="url" name="userSite2" class="form-control" id="userSite2" placeholder="个人网址2"  ng-model="user.userSite2" ng-required/>
  68. 					<div class="alert alert-danger help-block" ng-show="formKe.userSite2.$dirty&&formKe.userSite2.$error.url">格式不正确</div>
  69. 					<!--ng-required',也会在formKe.userEmail.$error生成$error.required，页面首次加载，就为false，所以不需要加上formKe.userSite2.$dirty-->
  70. 					<!--type='url',也会在formKe.userEmail.$error生成$error.url-->
  71. 					错误$error：{{formKe.userSite2.$error}}++改动过$dirty：{{formKe.userSite2.$dirty}} ++验证没通过$invalid：{{formKe.userSite2.$invalid}}++非网址{{formKe.userSite2.$error.url}}++没填写{{formKe.userSite2.$error.required}}（注意和上ng-required和required区别）
  72. 				</div>
  73. 			</div>
  74. 			<div class="form-group" ng-class="{'has-error':formKe.num.$dirty&&formKe.num.$invalid}">
  75. 				<label for="num" class="control-label col-sm-2 ">数字包含e可以浮点</label>
  76. 				<div class="col-sm-10">
  77. 					<input type="number" name="num" class="form-control" id="num"  placeholder="数字包含e"  ng-model="user.num" ng-required /><!--min="1" max="99" 因为可以输入e，最大值99便不会验证-->
  78. 					<div class="alert alert-danger help-block" ng-show="formKe.num.$dirty&&formKe.num.$error.number">必须数字</div>
  79. 					<!--<div class="alert alert-danger help-block" ng-show="formKe.num.$error.min">不得小于0</div>
  80. 					<div class="alert alert-danger help-block" ng-show="formKe.num.$error.max">不得超过99</div>
  81. 					min和max,也会在$error.min和生成$error.max-->
  82. 					错误$error：{{formKe.num.$error}}++改动过$dirty：{{formKe.num.$dirty}} ++验证没通过$invalid：{{formKe.num.$invalid}}+没填写{{formKe.num.$error.required}}
  83. 				</div>
  84. 			</div>
  86. 			<div class="form-group" ng-class="{'has-error':formKe.userAge.$dirty&&formKe.userAge.$invalid}">
  87. 				<label for="userAge" class="control-label col-sm-2 ">年龄</label>
  88. 				<div class="col-sm-10">
  89. 					<input type="text" name="userAge" class="form-control" id="userAge"  placeholder="年龄"  ng-model="user.userAge" ng-required ng-pattern="/^\d{1,2}$/"/>
  90. 					<div class="alert alert-danger help-block" ng-show="formKe.userAge.$dirty&&formKe.userAge.$error.pattern">必须1-99的数字</div>
  91. 					<!--min和max,也会在$error.min和生成$error.max-->
  92. 					错误$error：{{formKe.userAge.$error}}++改动过$dirty：{{formKe.userAge.$dirty}} ++验证没通过$invalid：{{formKe.userAge.$invalid}}+没填写{{formKe.userAge.$error.required}}++非数字{{formKe.userAge.$error.number}}++非1-99数字{{formKe.userAge.$error.pattern}}
  93. 				</div>
  94. 			</div>
  95. 			<div class="form-group" >
  96. 				<label for="userSex" class="control-label col-sm-2 ">(无验证)性别</label>
  97. 				<div class="col-sm-10">
  98. 					<label class="radio-inline">
  99. 						<!-- 赋值-->
  100. 						<input type="radio" name="inlineRadioOptions" ng-model="user.sex" value="" checked>男</label>
  101. 					<label class="radio-inline">
  102. 						<input type="radio"name="inlineRadioOptions"  ng-model="user.sex" value="">女</label>
  103. 				</div>
  104. 			</div>
  106. 			<div class="form-group" >
  107. 				<label for="userSex" class="control-label col-sm-2 ">*喜欢1</label>
  108. 				<div class="col-sm-10">
  109. 					<label class="checkbox-inline">
  110. 						<input type="checkbox"  ng-model="user.likes.eat" >吃</label>
  111. 					<label class="checkbox-inline">
  112. 						<input type="checkbox"   ng-model="user.likes.drink">喝</label>
  113. 					<label class="checkbox-inline">
  114. 						<input type="checkbox" ng-model="user.likes.hitbean" >打豆豆</label>
  115. 				</div>
  116. 			</div>
  117. 			<div class="form-group" >
  118. 				<!-- 用指令生成-->
  119. 				<label  class="control-label col-sm-2 ">指令生成复选框双向绑定喜欢2</label>
  120. 				<div class="col-sm-10">
  121. 					<label class="checkbox-inline" ng-repeat="item in hobbies">
  122. 						<input type="checkbox" value="" ng-checked="user.hobbyIds.indexOf(item.id)!=-1"  ng-click="toggleThis(item.id)">{{item.hobby}}》索引：{{user.hobbyIds.indexOf(item.id)}}</label>
  123. 				</div>
  124. 			</div>
  125. 			<div class="form-group" >
  126. 				<!-- 用指令生成-->
  127. 				<label  class="control-label col-sm-2 ">三级联动</label>
  128. 				<div class="col-sm-3">
  129. 					<!--1，写在select标签上,无须option标签-->
  130. 					<!--2，ng-options和ng-repeator一样循环。因为option有value (item.id)和(as)用户看到的值(item.name ) for.-->
  131. 					<!--3，要起一个ng-model指令，即使model层没用到-->
  132. 					<!--6，省改变时候，第三级别区县隐藏:
  133. 				省ng-change="county = false" ，县ng-hide="!county"：本质改变ng-model的值，实时双向绑定 -->
  134. 					<select class="form-control" ng-change="county = false" ng-options= "item.id as item.name for item in address|cityfilter:0" ng-model="province"></select>
  135. 				</div>
  136. 				<div class="col-sm-3" >
  137. 					<!--4，过滤参数是省的ng-model，代表Id  ==>
  138. 					item.id-->
  139. 					<select class="form-control" ng-show="province" ng-options= "item.id as item.name for item in address|cityfilter:province" ng-model="district"></select>
  140. 					<!--5，ng-show的设定  下面当province和district有值才显示，值&&值之后变成bool？-->
  141. 				</div>
  142. 				<div class="col-sm-3">
  143. 					<select class="form-control" ng-show="province&&district" ng-hide="!county" ng-options= "item.id as item.name for item in address|cityfilter:district" ng-model="county"></select>
  144. 				</div>
  145. 				<!--7，问题：展示一个人的固定的省市县，后台知道查询出了县id，倒过来==>市==>省。：直接在控制器内写方法--></div>
  146. 				<div class="form-group" >
  147. 			<div class="col-sm-2" ></div>
  148. 			<div class="col-sm-10" >
  149. 				<button type="submit" class="btn btn-primary" ng-disabled="formKe.$invalid||!user.likes||!(user.likes.eat||user.likes.drink||user.likes.hitbean)">Regieter</button>
  150. 				没通过：{{formKe.$invalid}}
  151. 				错误：{{formKe.$error}}
  152. 				爱好：{{user.likes===undefined?'无爱好':user.likes}}
  153. 				<button type="reset" class="btn btn-primary" ng-click="resetForm(formKe)">Reset</button>
  154. 			</div></div>
  156. 		</form>
  157. 	</div>
  158. </div>
  159. </body>
  160. </html>

js

  1. angular.module('AppKe', [])
  2. 	.filter("cityfilter", function() {
  3. 		//前台用法。会传入一个
  4. 		return function(data, parent) { //这两个参数1，全部数据3分全部数据？ 2，parent传的参数
  5. 			//console.log(data, parent);
  6. 			var finalArray = [];
  7. 			angular.forEach(data, function(obj) {
  8. 				//console.log(obj);//3份重复的数据
  9. 				if (obj.parent == parent) {
  10. 					finalArray.push(obj);
  11. 				}
  12. 			})
  13. 			return finalArray;
  14. 		}
  15. 	})
  16. 	.controller('OuterController', function($scope) {
  17. 		/***************************************************1复选框**************************************************/
  18. 		//1从数据库查询的所有选项，在前台全部列出
  19. 		$scope.hobbies = [{
  20. 			id: 1,
  21. 			hobby: "吃豆子"
  22. 		}, {
  23. 			id: 2,
  24. 			hobby: "喝豆汁"
  25. 		}, {
  26. 			id: 3,
  27. 			hobby: "豆豆玩"
  28. 		}, {
  29. 			id: 4,
  30. 			hobby: "打豆豆"
  31. 		}, {
  32. 			id: 5,
  33. 			hobby: "打一天豆豆"
  34. 		}];
  35. 		/*2从当前用户的选项id数组，在前台显示出用户的选中
  36. 		$scope.user.hobbyIds=[3,5] 不行*/
  37. 		$scope.user = {
  38. 				hobbyIds: [3, 5, 2]
  39. 			}
  40. 			/*3,用户点击的时候:可能选中，可能没选中
  41. 			当view中没选中，点击选中时，model层($scope.user)要添加对应的喜好选项Id
  42. 			当view中选中，点击取消时，model层($scope.user)要删除对应的喜好选项Id  ，不要受到上面$scope.user的影响，删除了就少了。*/
  43. 		$scope.toggleThis = function(id) {
  44. 				//假如这个用户没有喜好
  45. 				var index = -1;
  46. 				if (!$scope.user.hobbyIds) {
  47. 					$scope.user.hobbyIds = [];
  48. 				} else {
  49. 					index = $scope.user.hobbyIds.indexOf(id);
  50. 				}
  51. 				console.log(index);
  52. 				//如果有这个选项，表示已经选中了，下面做删除的操作
  53. 				if (index != -1) {
  54. 					$scope.user.hobbyIds.splice(index, 1); //页面双向绑定，页面会变化
  55. 				} else {
  56. 					$scope.user.hobbyIds.push(id); //页面双向绑定，页面会变化
  57. 				}
  59. 			}
  60. 			/*************************************************2三级联动****************************************************/
  61. 			//1,后台获取数据库数据，自动绑定到前台
  62. 		$scope.address = [{
  63. 			name: '上海',
  64. 			parent: 0,
  65. 			id: 1
  66. 		}, {
  67. 			name: '上海市',
  68. 			parent: 1,
  69. 			id: 2
  70. 		}, {
  71. 			name: '上海一区',
  72. 			parent: 2,
  73. 			id: 8
  74. 		}, {
  75. 			name: '上海二区',
  76. 			parent: 2,
  77. 			id: 3
  78. 		}, {
  79. 			name: '北京',
  80. 			parent: 0,
  81. 			id: 4
  82. 		}, {
  83. 			name: '北京市',
  84. 			parent: 4,
  85. 			id: 5
  86. 		}, {
  87. 			name: '北京一区',
  88. 			parent: 5,
  89. 			id: 6
  90. 		}, {
  91. 			name: '北京二区',
  92. 			parent: 5,
  93. 			id: 7
  94. 		}, {
  95. 			name: '山东',
  96. 			parent: 0,
  97. 			id: 9
  98. 		}, {
  99. 			name: '青岛市',
  100. 			parent: 9,
  101. 			id: 100
  102. 		}, {
  103. 			name: '菏泽市',
  104. 			parent: 9,
  105. 			id: 11
  106. 		}, {
  107. 			name: '青岛一区',
  108. 			parent: 100,
  109. 			id: 12
  110. 		}, {
  111. 			name: '菏泽一区‎',
  112. 			parent: 11,
  113. 			id: 13
  114. 		}];
  115. 		//2给省、市、县、区写过滤器
  116. 		//省：把parentid不是0的过滤掉
  117. 		//filter：对对象的某个字段过滤掉  不是精准过滤（只能找parentid=0或者某个值的），这次过滤的是parentid不是0的的
  118. 		//这个时候，只能自定义过滤器 在上面cityfilter
  120. 		//3省市区的选中
  121. 		$scope.county=3;
  122. 		 //从后台查这个人在的区县id是2---pid--》市id--pid--》省id
  124. 		//写一个普通方法，用this  this的指向？ 有
  125. 		this.searchParent = function(Id) {
  126. 			var pId;
  127. 			angular.forEach($scope.address, function(item) {
  128. 				if ( item.id== Id) {
  129. 					pId = item.parent;
  130. 					console.log(pId);
  131. 					return; //终止循环,跳出所有循环
  132. 				}
  134. 			})
  135. 			return pId;
  136. 		}
  138. 		if ($scope.county != undefined) {
  139. 			console.log($scope.county);
  140. 			$scope.district = this.searchParent($scope.county);
  141. 			console.log($scope.district);
  142. 			$scope.province = this.searchParent($scope.district);
  143. 		}
  145. 	/***************************************************重置**************************************************************/
  146. 	/*type=reset会将用户输入的清空，默认form的一些属性，radio会默认选第一个。为第一个select会选第一个值
  147. 	但是不能将绑定数据表单元素重新绑定上去 比如绑定的checkbox，select不能绑定*/
  148. 	 $scope.resetForm=function (formKe) {
  149. 	 	console.log(formKe)
  151.         /*$setPristine 会将class,$dirty,$pristine恢复，但不是单$.error恢复*/
  152. 	 	formKe.$setPristine();//所以在ng-show面加上....$dirty 重置到原来状态的时候..$dirty就变成了false。
  153. 	 	/*对checkbox处理*/
  154. 	 	$scope.user = {
  155. 				hobbyIds: [3, 5, 2]
  156. 			}
  157. 	 }
  159. 	})

截图

草稿

  1. 1表单
  2. input属性
  3. name 名字
  4. ng-model 绑定的数据
  5. ng-required 是否必填
  6. ng-minlength   ng-maxlength 最小、最大长度
  7. ng-pattern 匹配模式
  8. ng-change 值变化的回调
  10. css样式
  12. 表单验证  非常全面
  13. http://www.miaoyueyue.com/archives/607.html
  14. 博客园
  15. http://www.cnblogs.com/rohelm/p/4033513.html
  17. ng-show="expression"
  19. ng-required 
  21. --注入的3中形式
  22. 构造者 --angular
  23. geterseter
  24. 反射
  26. function controller($scope){}   注入$window  service等
  28. undefined||true
  29. true
  30. undefined||false
  31. false
  32. undefined&&false
  33. undefined
  34. undefined&&true
  35. undefined
  36. !undefined
  37. true

AngularJS系列：表单全解（表单验证，radio必选，三级联动，check绑定，form提交验证）的更多相关文章

  1. oracle 查看锁表情况与解表

      oracle 查看锁表情况与解表 CreateTime--2018年4月27日17:24:37 Author:Marydon 1.锁表查询 --锁表查询 SELECT OBJECT_NAME AS ...

  2. [AngularJS] AngularJS系列(3) 中级篇之表单验证

    目录 基本验证 验证插件messages 自定义验证 基本验证 <form name="form" novalidate ng-app> <span>{{f ...

  3. POST &amp; GET &amp; Ajax 全解

    GET&POST&Ajax 全解 一.POST和GET的差别 GET:GET方法提交数据不安全,数据置于请求行.客户段地址栏可见:GET方法提交的数据限制大小在255个字符之内.參数直 ...

  4. SpringMVC学习系列（11） 之 表单标签

    本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图上展示WebModel中的数据更加轻松. 一.首先我们先做一个简单了例子来对Spring MV ...

  5. Django学习笔记之Django Form表单详解

    知识预览 构建一个表单 在Django 中构建一个表单 Django Form 类详解 使用表单模板 回到顶部 构建一个表单 假设你想在你的网站上创建一个简单的表单,以获得用户的名字.你需要类似这样的 ...

  6. 【js类库AngularJs】学习angularJs的指令（包括常见表单验证，隐藏等功能）

    [js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...

  7. JS实现表单全选以及取消全选实例

    实现效果: 全选按钮:点击全选按钮所有的小按钮都会被选中:点掉全选按钮,所有按钮取消选中: 小按钮:只有全部被选中,全选按钮才会被选中 思路分析: 1.全选和取消全选做法:让下面所有复选框的 chec ...

  8. Logstash学习之路（四）使用Logstash将mysql数据导入elasticsearch（单表同步、多表同步、全量同步、增量同步）

    一.使用Logstash将mysql数据导入elasticsearch 1.在mysql中准备数据: mysql> show tables; +----------------+ | Table ...

  9. 史上最全Java表单验证封装类

    package com.tongrong.utils; import java.util.Collection; import java.util.Map; import java.util.rege ...

随机推荐

  1. CodeForces - 424B (贪心算法)

    Megacity Time Limit: 2000MS   Memory Limit: 262144KB   64bit IO Format: %I64d & %I64u Submit Sta ...

  2. Light OJ 1296 - Again Stone Game (博弈sg函数递推)

    F - Again Stone Game Time Limit:2000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu ...

  3. docke跨主机通信之gre隧道

    GRE简介 GRE可以对网络层的任何协议来进行封装,类似LVS的IPIP协议,在原有的数据报上增加GRE协议数据报.然后在网络上传输,到达对端后,解开GRE数据报头,得到真实的数据报.其中的mac地址 ...

  4. Spring源码下载地址

    今天想下载一下Spring的源代码,登录到Spring官网,傻眼了,根本找不到下载的地方!费了九牛二虎之力在网上找到了一个下载地址,记下来,免得下次再次傻找. http://s3.amazonaws. ...

  5. pycharm上运行django服务器端、以及创建app方法

     快来加入群[python爬虫交流群](群号570070796),发现精彩内容. 安装Django  下载Django包,解压缩. CMD 进入解压路径下. 执行:python setup.py in ...

  6. LINUX下安装TeamViewer

    https://www.teamviewer.com/zhcn/download/linux/ [root@ok teamviewer]# yum install -y teamviewer_11.0 ...

  7. 用PHP语言做网站常见漏洞有哪些?

    第一:SQL注入漏洞    在进行网站开发的时候,程序员由于对用户输人数据缺乏全面判断或者过滤不严导致服务器执行一些恶意信息,比如用户信息查询等.黑客可以根据恶意程序返回的结果获取相应的信息.这就是所 ...

  8. TextView属性大全

    今天研究了TextView一天了,发现网上有一篇讲TextView属性的,非常全,收藏一下先. 发现TextView有一个比较大的问题,就是文字排版的问题,遇到数字,字母,符号等就会有问题,目前还没有 ...

  9. Json格式数据某一列。

    {title : '支付费率',elCls : 'center', dataIndex :'zfrate',width:100, renderer :function(value,obj){ if(o ...

  10. [LintCode] Trapping Rain Water

    Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...