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.表单属性
利用这些表单属性,可以在表单提交时进行数据的检测。比如,所有的输入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 >
<div >
</div>
</div>
<form name="actForm" novalidate>
<div >
<br>
<br>
<div >
<table >
<tr>
<td >{{'number' | translate }}</td>
<td >
<input type="text"
name="number" ng-model="data.number" required
ng-pattern="/^([1-9]d*|[0]{1,1})$/" />
</td>
<td >
<span 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 >{{'chineseName' | translate }}</td>
<td >
<input type="text"
name="chineseName" ng-model="data.chineseName"
required ng-pattern="/^[u4E00-u9FA5]{0,}$/" />
</td>
<td >
<span 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 >
<input type="button"
value="{{'baocun' | translate }}" title="{{'baocun' | translate }}"
ng-if="!detail" ng-click="save();">
<input type="button" value="{{'guanbi' | translate }}" title="{{'guanbi' | translate }}"
ng-click="close();">
</div>
</form>
</body>
请先登录后,再回复
行家里手-技能共享平台