Angular Js 表单验证

Anjular Js的验证必须在form表中才能生效，不在form中不生效。

1. from表中进行设置<form name="actForm" novalidate>novalidate属性是禁止form表单原生态的校验，避免自定义校验产生冲突。

2.requied 标识这是一个必填的选项，不能为空

3.ng-pattern="/^([1-9]\d*|[0]{1,1})$/" 是一个正则表达式输入第一位不为0的正整数，判定是否符合规则

4.ng-show=" actForm.number.$dirty && actForm.number.$invalid" 当结果为true是展现，否则隐藏

5.表单属性

$dirty	表单有填写记录
$valid	字段内容合法的
$invalid	字段内容是非法的
$pristine	表单没有填写记录

利用这些表单属性，可以在表单提交时进行数据的检测。比如，所有的输入input是否符合要求

	$scope.save = function(){
//$scope.actForm.$pristine actForm中没有输入内容，没有为true，
//注意页面加载时赋予input值，只要没有改变就是true，重点是输入
		if($scope.actForm.$pristine){
			alert("表单信息没有填写或没有改变");
			return;
		}
//$scope.actForm.$invalid 判定所有的输入是否合法，即是否符合你设置的规则，一个不符合就是false
		if( $scope.actForm.$invalid){
			alert("表单信息格式填写不正确");
			return;
		}
}

<body ng-controller="xheducationactController" >
		<div class="loading">
			<div class="loadingimg">
			</div>
		</div>
	<form name="actForm" novalidate>
		<div class="content">
			<br>
			<br>
			<div class="edit">
				<table width="100%">
					<tr>
						<td width="15%">{{'number' | translate }}</td>
						<td width="35%">
							<input  type="text" class="text_area" 
								name="number" ng-model="data.number"  required 
								ng-pattern="/^([1-9]\d*|[0]{1,1})$/" />
						</td>
						<td width="60%">
							  <span style="color:red" ng-show=" actForm.number.$dirty && actForm.number.$invalid">
								  <span ng-show="actForm.number.$error.required">数字是必须的</span>
								  <span ng-show="actForm.number.$error.pattern">必须是数字</span>
							  </span>
   						</td>
					</tr>
					<tr>
						<td width="15%">{{'chineseName' | translate }}</td>
						<td width="35%">
							<input type="text" class="text_area" 
								name="chineseName" ng-model="data.chineseName" 
								required ng-pattern="/^[\u4E00-\u9FA5]{0,}$/" />
						</td> 
						<td width="60%">
							  <span style="color:red" ng-show=" actForm.chineseName.$dirty && actForm.chineseName.$invalid" >
								  <span ng-show="actForm.chineseName.$error.required">中文名是必须的</span>
								  <span ng-show="actForm.chineseName.$error.pattern">必须是中文</span>
							  </span>
   						</td>
					</tr>
				</table>
			</div>
			<br>
		</div>
		<div class="operation">
			<input type="button" 
			class="cbtn" value="{{'baocun' | translate }}" title="{{'baocun' | translate }}" 
				ng-if="!detail" ng-click="save();">
			<input type="button" class="cbtn" value="{{'guanbi' | translate }}" title="{{'guanbi' | translate }}" 
				ng-click="close();">
			
		</div>
	</form>
	</body>

Angular Js 表单验证

猜你喜欢