AngularJS表单验证

来源：互联网发布：宠物商城源码编辑：程序博客网时间：2024/06/08 10:22

基本格式

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8"/>         <!--为了方便显示效果-->        <link rel="stylesheet" type="text/css" href="lib/bootstrap.min.css">    </head>    <body ng-app="myApp">        <!--jquery在不使用时可以不引用-->        <script type="text/javascript" src="lib/1.11.1/jquery.min.js"></script>        <script type="text/javascript" src="lib/angular.min.js"></script>        <script type="text/javascript" src="js.main.js"></script>    </body></html>

ng-model

<body ng-app="myApp"><!--变量发生变化，更新view；view发生变化，就会更新内存-->    <input ng-model="name"></input>    <div>        {{name}}    </div>    <script>        angular.module('myApp',[])    </script></body>

ng-minlength && ng-maxlength

<body ng-app="myApp">    <input             class-"form-control"            ng-model="name"             type="number"             ng-minlength="3"             ng-maxlength="10">    </input>    <div>        {{name}}    </div></body>

ng-submit && ng-class && ng-if

<body ng-app="myApp" ng-controller="MainController">    <form name="signUpForm">        <div class="form-group" ng-submit="submitForm">            <label>用户名：</label>            <input name="username"                    ng-model="username"                    ng-class="{'error':signUpForm.username.$invalid && signUpForm.username.$touched"                    ng-minlength="3"                     ng-maxlength="10"                    class="form-control" >            </input>        </div>        <div ng-if="signUpForm.username.$invalid && signUpForm.username.$touched">             您的输入有误，请检查！        </div>        <div ng-if="signUpForm.username.$valid">             <div>……</div>            <div>……</div>            <div>……</div>        </div>        <botton type="submit" class="bin btn-primary" ng-disabled="signUpForm.$invalid">提交</button>    </form>    <script>        angular.module('myApp',[])            .controller('MainController',function($scope){                $scope.submitForm=function()                {                    console.log('表单提交啦！')                }            })     </script></body>

ng-disabled

<body ng-app="myApp" ng-controller="MainController">    <form name="signUpForm">        <div class="form-group" ng-submit="submitForm">            <label>用户名：</label>            <input name="username"                    ng-model="username"                    ng-class="{'error':signUpForm.username.$invalid && signUpForm.username.$touched"                    ng-minlength="3"                     ng-maxlength="10"                    required                    class="form-control" >            </input>            <!--用户username是合法的，username2不可用-->            <input name="username2"                    ng-disabled="signUpForm.username.$valid"                    ng-model="username"                    class="form-control" >            </input>        </div>    </form>    <script>        angular.module('myApp',[])            .controller('MainController',function($scope){                $scope.submitForm=function()                {                    console.log('表单提交啦！')                }            })     </script></body>

表单验证

<body ng-app="myApp" ng-controller="SignUpController">    <div class="wrapper">    <h2>注册</h2>         <form name="signUpForm" ng-controller="submitForm">            <div class="form-group" ng-class="{'has-success':signUpForm.uasername.$valid}">                <label>用户名：</label>                <input name="username"                        type="text"                         class="form-control"                         ng-model="userdata.username"                        ng-minlength="3"                         ng-maxlength="10"                        required                         >                </input>                <!--input_result 设置样式 （相对定位）-->                <p class=" fa fa-chech input_result success " ng-if="signUpForm.uasername.$valid"></p>                <p class="error" ng-if="                                (signUpForm.username.$error.required &&                                    signUpForm.username.$touched">                    用户名不可为空                </p>                <p class="error" ng-if="                                (signUpForm.username.$error.minlength||signUpForm.username.$error.maxlength) &&                                   signUpForm.username.$touched">                    用户名长度应在4-32位                </p>            </div>            <div class="form-group" ng-class="{'has-success':signUpForm.password.$valid}">                <label>密码：</label>                <input name="password"                        type="password"                         class="form-control"                         ng-model="userdata.password"                        ng-minlength="6"                         ng-maxlength="24"                        required                         >                </input>                <!--input_result 设置样式 （相对定位）-->                <p class=" fa fa-chech input_result success " ng-if="signUpForm.upassword.$valid"></p>                <p class="error" ng-if="                                (signUpForm.password.$error.required &&                                    signUpForm.password.$touched">                    密码不可为空                </p>                <p class="error" ng-if="                                (signUpForm.password.$error.minlength||signUpForm.username.$error.maxlength) &&                                   signUpForm.username.$touched">                    密码长度应在4-24位                </p>            </div>            <div class="form-group" ng-class="{'has-success':signUpForm.password2.$valid}">                <label>确认密码：</label>                <input name="password2"                        type="password"                         class="form-control"                         ng-model="userdata.password2"                        compare="userdata.password"                        required                         >                </input>                <!--input_result 设置样式 （相对定位）-->                <p class=" fa fa-chech input_result success " ng-if="signUpForm.password2.$valid"></p>                <p class="error" ng-if="                                (signUpForm.password2.$error.compare &&                                    signUpForm.password2.$touched">                    确认密码不可为空                </p>            </div>         </form>    </div>    <script>        angular.module('myApp',[])            .controller('signUpController',function($scope)            {                $scope.userdata ={};                $scope.submitForm=function()                {                    console.log($scope.userdata);                }            })         .directive('compare',function()        {            var o={};            o.strict='AE';            o.scope=            {                orgText: '=compare'            }            o.require='ngModel';            o.link=function(sco,ele,att,con)            {                con.$validators.compare=function(v)                {                    return v==sco.orgText;                }                sco.$watch('orgText',function()                {                    con.$validate();                })            }        })    </script></body>

0 0