angularJs表单验证

来源：互联网发布：mac cad菜单栏不见了编辑：程序博客网时间：2024/05/21 17:00

html部分：

<form name = "myForm" novalidate >    <fieldset>        <legend>Sign up</legend>        <div style="width: 100%;">            <label>Your name</label>            <input type="text" placeholder="name" ng-model="name" name="name" ng-minlength="3" ng-maxlength="20" required>            <span style="color:red" ng-show="myForm.name.$dirty && myForm.name.$invalid">                <small class="error"  ng-show="myForm.name.$error.required">                     Your name is required                </small>                <small class="error"  ng-show="myForm.name.$error.minlength">                     Your name is required at least 3 characters                </small>                <small class="error"  ng-show="myForm.name.$error.maxlength">                     Your name can not be longer than 20 characters                </small>            </span>        </div>        <button type="submit" ng-disabled="myForm.name.$dirty && myForm.name.$invalid">submit</button>    </fieldset></form>

js部分：

var myApp = angular.module('myApp',[]); myApp.controller('chenController',['$scope',function($scope){     $scope.name = "chen"; }])

运行结果：

阅读全文

0 0