加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

当输入验证失败时,Angularjs阻止表单提交

发布时间:2020-12-17 09:14:17 所属栏目:安全 来源:网络整理
导读:我写一个简单的登录表单使用angularjs与一些客户端输入验证检查用户名和密码不是空的,超过三个字符。看下面的代码: form name="loginform" novalidate ng-submit="login.submit()" class="css-form" fieldset div class="control-group input-prepend" spa
我写一个简单的登录表单使用angularjs与一些客户端输入验证检查用户名和密码不是空的,超过三个字符。看下面的代码:
<form name="loginform" novalidate ng-submit="login.submit()" class="css-form">
    <fieldset>

        <div class="control-group input-prepend">
            <span class="add-on"><i class="icon-user"></i></span>
            <input type="text" ng-model="login.username" name="username" required ng-minlength="3" placeholder="username" />
        </div>

        <div class="control-group input-prepend">
            <span class="add-on"><i class="icon-lock"></i></span>
            <input type="password" ng-model="login.password" name="password" required ng-minlength="3" placeholder="" />
        </div>

        <div class="control-group">
            <input class="btn" type="submit" value="Log in">
        </div>

    </fieldset>
</form>

而控制器:

var controller = function($scope) {

    $scope.login = {
        submit: function() {

            Console.info($scope.login.username + ' ' + $scope.login.password);
        }
    }

};

问题是login.submit函数将被调用,即使输入无效。是否可以防止这种行为?

作为一个旁注,我可以提及,我使用bootstrap和requirejs以及。

你可以做:
<form name="loginform" novalidate ng-submit="loginform.$valid && login.submit()">

不需要控制器检查。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读