angular表单认证大全&angular表单控件

最新推荐文章于 2023-04-14 11:32:49 发布

吴杼恩

最新推荐文章于 2023-04-14 11:32:49 发布

阅读量1k

点赞数 1

分类专栏： AngularJS知识点汇总文章标签： angular表单认证大全

本文链接：https://blog.csdn.net/qianqianyixiao1/article/details/50594408

版权

AngularJS知识点汇总专栏收录该内容

31 篇文章 0 订阅

订阅专栏

Q:novalidate:阻止常规的表单提交

<form class="form-horizontal" role="form" name="adduserForm" novalidate="novalidate">//如果你要自己定义验证方式，那么请加上novalidate属性，以此避开浏览器自行验证。

Q:form中数据有错误时候不可用

<button ng-disabled="adduserForm.$invalid">Save Inner</button>

Q:输入时判断正确与否及时给输入框样式

   input.ng-invalid.ng-dirty {
	    border-color: #a94442 //输入错误
     }
     input.ng-valid.ng-dirty {
	border-color: #3c763d;//输入正确
     }

Q:当输入时就及时显示错误信息

<div  class="error" ng-show="adduserForm.firstName.$dirty &&adduserForm.firstName.$invalid">//当表单有修改并且这个"firstName"输入有错的时候显示这个div</div>

Q:设置不能为空

      <input type="text" class="form-control " name="firstName" ng-model="useradd.firstName" required /> 
  	<div  class="error" ng-show="adduserForm.firstName.$dirty &&adduserForm.firstName.$invalid">//当表单有修改并且这个"firstName"输入有错的时候显示这个div
  	<span ng-show="adduserForm.firstName.$error.required"> FirstName is required</span>//当这个输入为空时候显示
  	</div>

Q:设置不能为空

      <input type="text" class="form-control " name="firstName" ng-model="useradd.firstName"   ng-minlength="1" ng-maxlength="200"/> 
  	<div  class="error" ng-show="adduserForm.firstName.$dirty &&adduserForm.firstName.$invalid">//当表单有修改并且这个"firstName"输入有错的时候显示这个div
    	<span ng-show="adduserForm.firstName.$error.minlength || adduserForm.firstName.$error.maxlength"> The input value must be between 1-200</span>/输入值/不在最小最大范围内显示
  	</div>

Q:EMAIL格式认证

不建议用这种方式原因见注意事项5 这里这是为了演示正则表达式的用法.

      <input type="email" class="form-control"  name="email" ng-model="useradd.email"      ng-pattern="/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/"//> 
              <div  class="error" ng-show="adduserForm.email.$dirty &&adduserForm.email.$invalid">
 <span style="white-space:pre">	</span> <span ng-show="adduserForm.email.$error.pattern"> Email Address 格式错误</span>
  </div>

另一种直接判断即可(建议用这种)

      <input type="email" class="form-control"  name="email" ng-model="useradd.email"  required /> 
              <div  class="error" ng-show="adduserForm.email.$dirty &&adduserForm.email.$invalid">
  <span ng-show="adduserForm.email.$error"> Email Address format error</span>
  </div>

Q:提交和重置按钮

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate  >
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
 <button ng-click="sub(user)">SUBMIT</button>
  </form>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName:"John", lastName:"Doe"};
	  $scope.sub = function(infor) {
     alert(infor.firstName)
    };
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>

</body>
</html>

注意事项:

1.确保form上标签有一个name属性.
2.form中不能有action属性。提交交由ng-submit处理
3.每个input一定要有ng-model，最好有一个name方便引用,require或者ng-minlength之类才起作用.
4.novalidate:标准浏览器如火狐，谷歌等对HTML5有很好的支持。众所周知，HTML5中input的type属性已经具备了验证功能。如果你要自己定义验证方式，那么请加上novalidate属性，以此避开浏览器自行验证。
5.type类型: HTML5的type属性可以包含email、number,url等，但是angular又内部重写了这些属性，所以你就直接判断使用即可,这这些内容就不需利用ng-pattern正则

表单控件

Q:单选按钮

  <label class="checkbox-inline">
      <input type="radio" name="optionsType"  ng-model="addProj.type"  >  Date
   </label>
   <label class="checkbox-inline">
      <input type="radio" name="optionsType" ng-model="addProj.type" > Dropdown
   </label>
      <label class="checkbox-inline">
      <input type="radio" name="optionsType" ng-model="addProj.type" > Seperator
   </label>

Q:多选按钮

     <input type="checkbox"   ng-model="a" ng-true-value="同意"  ng-false-value="不同意" />

Q:输入框

<input type="text" ng-model="topic.title" />

Q:文本域

 <textarea  class="form-control "   ng-model="myText" ></textarea>

Q:select

<select class="form-control " ng-model="fcompanyValue"  ng-options="item.id as item.value for item in fcompany"></select>

js:

$scope.fcompany = [ {
				id : "",
				value : 'all'
			}, {
				id : "gap china",
				value : 'gap china'
			} ];
			$scope.fcompanyValue = $scope.fcompany[0].id;

吴杼恩

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
angular表单认证大全&angular表单控件

Q:novalidate:阻止常规的表单提交 novalidate="novalidate">Q:设置不能为空和设置最大最小值 //当表单有修改并且这个"firstName"输入有错的时候显示这个div FirstName is required//当这个输入为空时候显示 The input value must
复制链接

扫一扫