<body ng-app="myApp" ng-controller="MoinController">
<style>
.error {
border: 1px solid red!important;
}
</style>
<form name="signUpForm" ng-submit="submitForm()">
<div class="form-group">
<label>用户名:</label>
<input class="form-control" name="username" ng-model="username" ng-minlength="4" ng-maxlength="10" ng-class="{‘error‘:signUpForm.username.$invalid &&
signUpForm.username.$touched }" required/>
</div>
</form>
</body>
<script>
angular.module(‘myApp‘, [])
.controller(‘MoinController‘, function($scope)
{
$scope.submitForm = function() {
console.log(‘表单提交了‘)
}
})
</script>
表单验证 ng-minlength:最小长度 ng-maxlength:最大长度 ng-class:根据条件添加class ng-submit:表单提交 该示例意义为:输入验证,当输入时不满足最少为4最多为10的字符时,自动给input添加error类,首次进入页面不生效
时间: 2024-10-20 12:27:55