Angular.js中输入框非空验证----ng-if

<!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中输入框非空验证----ng-if

猜你喜欢