第15篇：angular表单验证

最新推荐文章于 2024-02-28 18:51:02 发布

骑着代马去流浪

最新推荐文章于 2024-02-28 18:51:02 发布

阅读量593

点赞数

分类专栏： AngularJS 文章标签： angular表单验证

AngularJS 专栏收录该内容

29 篇文章 5 订阅

订阅专栏

原文地址：http://lib.csdn.net/article/angularjs/33619

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

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

骑着代马去流浪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第15篇：angular表单验证

原文地址：http://lib.csdn.net/article/angularjs/33619Q:novalidate:阻止常规的表单提交//如果你要自己定义验证方式，那么请加上novalidate属性，以此避开浏览器自行验证。 Q:form中数据有错误时候不可用Save Inner Q:输入时判断正确与否及时给输入框样式input.ng - invalid.ng
复制链接

扫一扫

专栏目录