<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../AngularJs/angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
名字:<input ng-model="name">
<span ng-if="checkData.nameCheck=='m'">不能为空</span>
<span ng-if="checkData.nameCheck=='e'">最少两个字</span><br/>
电话:<input ng-model="phone">
<span ng-if="checkData.phoneCheck=='m'">手机号</span>
<span ng-if="checkData.phoneCheck=='e'">格式错误</span><br/>
<button ng-click="submit()">提交</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//存校验数据滴,给定默认值
$scope.checkData =
{
"nameCheck":"m",
"phoneCheck":"m"
};
//提交时校验数据:二选一
$scope.submit = function()
{
//1.这种会一个一个校验的
if($scope.checkName() && $scope.checkPhone())
{
alert("数据都符合,可以与后台交互数据了")
}
//2.这种会一起校验完的
var nameFlag = $scope.checkName();
var phoneFlag = $scope.checkPhone();
if(nameFlag && phoneFlag){
alert("数据都符合,可以与后台交互数据了")
}
};
//注:如果校验的内容大同小异,可合并成一个校验的方法,我就不写了。
//校验名字
$scope.checkName = function(){
if($scope.name)
{
if($scope.name.length<2)
{
$scope.checkData.nameCheck = "e";
return false;
}else
{
//...进行某些正确的操作,如显示正确图片
$scope.checkData.nameCheck = "r";
return true;
}
}else
{
$scope.checkData.nameCheck = "m";
return false;
}
};
//校验电话
$scope.checkPhone = function()
{
var phone = $scope.phone;
if(phone)
{
var reg = /^1(3|4|5|6|7|8)\d{9}$/;//手机号正则
if(reg.test(phone)){
$scope.checkData.phoneCheck = "r";//正确
}else{
$scope.checkData.phoneCheck = "e";//格式错误
}
}else{
$scope.checkData.phoneCheck = "m";
return true;//可以为空
}
};
});
</script>
</body>
</html>
相关推荐
angular.js-master.zip
angularJS路由所用到的js文件,安全无毒,爱分享人
ng-book.2.Angular.4.r58.2017.3.code-samples
[ng-book.2r60随书代码]ng-book.2.Angular.4.r60.2017.4.code-samples.zip
angular.js-master详细demo
本文主要给大家介绍了关于Angular.js中上传指令ng-upload的基本使用,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: Angular上传指令ng-upload的基本使用,包括上传文件,图片,以及图片和视频在线...
angular-route.min.js(1.4.6版本) AngularJS 路由允许我们通过不同的 URL 访问不同的内容。 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA)。 通常我们的URL形式为 ...
angular-route.min.js前端MVC框架AngularJS路由视图所需资源Angular-route.js
angular.js-v1.4.0-rc.1
本文主要给大家介绍了关于Angular.js文件上传控件ng-file-upload结合springMVC使用的相关内容,对于Angular.js文件上传控件ng-file-upload不熟悉的朋友们可以先看看这篇文章(传送门),下面话不多说,来看看详细的...
angular.js下载
本篇文章主要介绍了Angular.js中angular-ui-router的简单实践,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
众所周知在传统的angularJS应用中,都是通过ng-app把angular应用绑定到某个dom上,这样做会把js代码入侵到html上,angular提供了手动启动的API–angular.bootstrap() 。 本文将给大家详细介绍关于Angular.js初始化之...
前端MVC框架AngularJS路由视图所需资源Angular-route.js
Angular.js输入框弹出城市联动地址选择代码,压缩包里面附带使用方法!
大家都知道Angular.js可以用ng-repeat来显示列表数据,可是如果想要自定义显示数据列表的话ng-repeat就实现不了了,这个时候可以利用ng-repeat-start 和 ng-repeat-end来实现,下面通过本文来详细看看实现的方法吧。
Angular-angular-editor-fabric-js.zip,基于fabric js for angular.ioangular-editor-fabric-js的拖放编辑器,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。...
1.angular权威教程(ng-book-2中文版) 2.ng-book2: The Complete Book on Angular4 3.ng-book2: The Complete Book on Angular5 所有资源均来自网络,请下载24小时内自行删除,有意者请去购买正版书籍: 《angular...