AngualrJS实现表单验证

最新推荐文章于 2019-03-14 11:41:59 发布

Take_Dream

最新推荐文章于 2019-03-14 11:41:59 发布

阅读量834

点赞数

分类专栏： angular

本文链接：https://blog.csdn.net/Take_Dream_as_Horse/article/details/51362094

版权

angular 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1、HTML代码

<div ng-app="myApp">
<form  name="myForm" ng-controller="validateCtrl" novalidate>
<p>
<span>用户名:</span><br/>
<input type="text" name="user" ng-model="user" required />
<span style="color:red;font-size:12px;" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名不能为空</span>
</span>
</p>
<p>
<span>邮箱:</span><br/>
<input type="email" name="email" ng-model="email" required />
<span style="color:red;font-size:12px;" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱不能为空</span>
<span ng-show="myForm.email.$error.email">非法的邮箱地址</span>
</span>
</p>
<p>
<span>密码:</span><br/>
<input type="text" name="pwd" ng-model="pwd" maxlength="11" ng-pattern="/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,11}$/" required>
<span style="color:red;font-size:12px" ng-show="myForm.pwd.$dirty && myForm.pwd.$invalid">
<span ng-show="myForm.pwd.$error.pattern">密码必须由数字和字母组成</span>
</span>
</p>
<p>
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid || myForm.pwd.$dirty && myForm.pwd.$invalid" ng-click="skip()"/>


</p>
</form>
</div>

2、JS代码

var app=angular.module("myApp",[]);


app.controller("validateCtrl",function($scope){
$scope.user="多多";
$scope.email="18200107869@163.com";
$scope.pwd="zhao1314527";
$scope.skip=function(){
window.location.href="http://www.baidu.com";
}
});