首页 > 代码库 > Angular表单验证

Angular表单验证

2024-08-21 03:07:07   225人阅读

novalidate   去掉html5自带的验证

ng-minlength    规定输入文本的最小长度

ng-maxlength    规定输入文本的最大长度

ng-submit  接收一个方法名，提交表单时触发这个方法

ng-class 规定一个条件，满足条件后添加指定的类名。语法如下：（error是类名，冒号后面的是条件）

 

ng-class="{‘error‘:form.username.$error.required}"

 

$pristine  没有被改过的表单

$dirty  被改过的表单

$valid  通过验证

$invalid 没有通过验证

$error  错误

语法：

<!-- 
        这是一个条件，表示检查所有规则
-->
form.username.$invalid

<!--
         表示只检查minlength规定的规则
 -->
form.username.$error.minlength

<!--
         form表示 form表单的form的name名字，
         username 表示form下某个表单
-->

 

当input上规定的验证规则通过后，在input 上写的 ng-model 才会生效。

ng-if  语句的条件满足显示元素，不满足移除元素

ng-disabled 同ng-if的用法一样，这个是表示元素可不可用的

 

根据以上知识点就可以写一个简单的表单验证了：

 

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../../Angular/angular.min.js"></script>
    <link rel="stylesheet" href="../../Angular/bootstrap.css"/>
    <style>
        .box
        {
            width:200px;
            margin:50px auto;
        }

        p.error
        {
            color:red;
        }

        input.error
        {
            border:1px solid red;
        }
    </style>
</head>
<body>

<div class="box" ng-controller="myController1">
    <form name="form" ng-submit="formSubmit()" novalidate>
        <h2>注册</h2>
        <div>
            <label>用户名：</label>
            <input type="text"
                   class="form-control"
                   ng-model="userdata.username"
                   name="username"
                   ng-minlength="3"
                   ng-maxlength="5"
                   required
                    />
            <div class="error" ng-show="form.username.$invalid && form.username.$dirty && form.submitted">
                <p class="error" ng-if="form.username.$error.minlength">最少输入3位</p>
                <p class="error" ng-if="form.username.$error.maxlength">最多输入5位</p>
                <p ng-if="form.username.$error.required" ng-class="{‘error‘:form.username.$error.required}">不能为空</p>
            </div>

        </div>
        <div>
            <label>密码：</label>
            <input type="password"
                   name="password"
                   ng-model="userdata.password"
                   class="form-control"
                   ng-minlength="6"
                   required
                   ng-class="{‘error‘:form.password.$invalid && form.password.$dirty}"
                    />
            <p class="error"  ng-if="form.password.$invalid && form.password.$dirty">密码格式不正确</p>
        </div>
        <div class="text-center">
            <input type="submit" class="btn btn-danger"/>
        </div>

    </form>
</div>


<script>
    angular.module("myApp",[])
            .controller("myController1",function($scope)
            {
                $scope.userdata = {};
                $scope.submitted = false;
                $scope.formSubmit = function()
                {
                    if($scope.form.$valid)
                    {
                        console.log($scope.userdata);

                        //scope可以直接点出from的name属性
                        console.log($scope.form)
                    }
                    else
                    {
                        $scope.form.submitted = true;
                    }

                }
            })
</script>
</body>
</html>

 

Angular表单验证


联系
我们