<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="login.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script>
</head>
<body ng-app="loginApp">
<p class="container">
<p class="login_logo">
</p>
<p class="form_container">
<p ng-messages="form_login.username.$error">
<p class="alertmsg" ng-message="required">Your username is required</p>
</p>
<p class="form_left">
<form class="form_login" name="form_login" ng-controller="loginCtrl" ng-submit="submitForm()" novalidate>
<p class="usr"><input id="username" name="username" ng-model="username" type="text" autofocus="autofocus" required /></p>
<p class="psw"><input id="password" name="password" ng-model="password" type="password" required /></p>
</form>
</p>
<p class="form_right">
<a class="submit" href="" ng-click="submitForm()"></a>
</p>
<p class="clear"></p>
</p>
</p>
<script type="text/javascript">
var app=angular.module("loginApp",["ngMessages"]);
app.controller("loginCtrl", function($scope){
$scope.username = "11";
$scope.password = "";
$scope.submitForm=function(){
};
});
</script>
</body>
</html>
用ng-messages做简单的表单验证,设置required使用户名为空的时候显示错误提示的p,代码如上,检查了半天不知道为什么不显示,请帮忙看一下,谢谢!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
上面这段代码你应该放在<form>标签里面。你试一下。