深究AngularJS——校验(非form表单)

为什么是非form表单?因为基本上都是通$http服务异步发送与接收数据,没有form表单个一样可以。更何况,form表单的提交校验在哪里都可以搜索得到,我这个是通过自己总结出来滴。


<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.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>

你可能感兴趣的:(AngularJS,angularJS应用详解)