您的位置：首页 > Web前端 > AngularJS

AngularJs的表单验证

2015-08-17 14:32 661 查看

如果你想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加novalidate标记.

<form name="form" novalidate>
<label name="email">Your Email</label>
<input type="email" name="email" ng-model="email" placeholder="Email Address" />
</form>

上面的代码,你可以删去或添加上novalidate,输入错误的email,会有不同的提示.

一.表单指令.

1.必填项:required.

2.最小长度:ng-minlength='{number}'

<input type="text" ng-minlength=5 />

2.最小长度:ng-maxlength='{number}'

<input type="text" ng-maxlength=5 />

4.模式匹配:ng-pattern="/正则表达式/"

<input type="text" ng-pattern='[a-zA-Z]' />

二:表单中的变量(formName.inputFiledName.property)

未修改的表单:未修改,值为true.否则为false.　　　　formName.inputFiledName.$pristine

修改过的表单:只要修改过了,不管验证是否通过,就是true. 　　formName.inputFiledName.$dirty

合法的表单:判断表单内容是否合法,合法就是true.　　.formName.inputFiledName.$valid

不合法表单:如果不合法,值为true　　.formName.inputFiledName.$invalid

错误对象.包含当前表单的所有验证内容,以及他们是否合法的信息.　　.formName.inputFiledName.$error

<!DOCTYPE html>
<html ng-app="formModel">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script type="text/javascript" src="js/angular-1.2.16.js" ></script>
</head>
<body ng-controller="formCtrl">
<form name="myForm" style="margin: 100px;" ng-submit="submitForm(myForm.$valid)">
必填项,eamail
<input name="personEmail" required="required" type="email" ng-model="person.email" placeholder="必填项,eamail" />
<br /><br />必填项,最小3个字符
<input name="personName" required ng-model="person.name" ng-minlength=3 placeholder="必填项,最小3个字符" />
<br />
<input type="submit" ng-disabled="myForm.$invalid" value="提交"/>
</form>
<span>myForm.personEmail.$valid:{{myForm.personEmail.$valid}}</span><br />
<span>myForm.personEmail.$error.required:{{myForm.personEmail.$error.required}}</span><br />
<span>myForm.personEmail.$error.email:{{myForm.personEmail.$error.email}}</span><br />
<span>myForm.personEmail.$pristine:{{myForm.personEmail.$pristine}}</span><br />
<span>myForm.personEmail.$error:{{myForm.personEmail.$error}}</span>
</body>
<script type="text/javascript">
var myModule=angular.module("formModel",[]);
myModule.controller("formCtrl",function($scope){
$scope.person={
name:"",
email:""
};
$scope.submitForm=function(vailid){
alert(vailid);
}
})

</script>
</html>

三:css样式:

AngularJs处理表单时,会根据表单当前的状态添加一些css类.

.ng-pristine{} 未修改的样式.

.ng-dirty{} 修改过后的样式

.ng-valid{} 验证合法时

.ng-invalid{} 验证不合法时.

.personName.ng-pristine{
border: 1px solid blue;
}
.personName.ng-dirty{
border: 1px solid yellow;
}
.personName.ng-invalid{
border: 1px solid red;
}
.personName.ng-valid{
border: 1px solid green;
}

把这段代码加入到上面的例子,就能看到效果了.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航