使用AngularJS进行表单验证

youyouzouzou 2016-12-01

<form name="myForm"  ng-submit="addForm()" novalidate>

     <div class="form-group">

        <label>名称</label>

        <input type="text" name="userName" placeHolder="名称" ng-minlength="3"

           ng-maxlength="20" required>

         <div class="m-t-xs" ng-show="myForm.userName.$invalid && myForm.submitted">

               <small class="text-danger" ng-show="myForm.userName.$error.required">

                      请输入

              </small>

              <small class="text-danger" ng-show="myForm.userName.$error.minlength">

                      名称最小长度为3                                

               </small>

                <small class="text-danger" ng-show="myForm.userName.$error.maxlength">

                       名称最大长度为20

                </small>

         </div>

    </div>

    <div class="form-group">

            <button type="submit">保存</button>

     </div>

</form>

$scope.addForm = function(){

    if($scope.myForm.$valid){

        //提交表单

    }else{

         $scope.myForm.submitted = true;//显示错误提示信息

    }

}

相关推荐