您的位置：首页 > Web前端 > AngularJS

AngularJS的简单表单验证

2017-08-23 15:12 387 查看

代码下载：https://files.cnblogs.com/files/xiandedanteng/angularjsCheckSimpleForm.rar

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="notesApp">
<head>
<title> New Document </title>
<meta charset="utf-8">
<script src="angular1.4.6.min.js"></script>
</head>

<body ng-controller="MainCtrl as ctrl">
<form ng-submit="ctrl.submit()" name="myForm">
<table>
<tr>
<td><input type="text" name="uname" ng-model="ctrl.user.username" required ng-minlength="4"/></td>
<td>
<span ng-show="myForm.uname.$error.required">This a required field</span>
<span ng-show="myForm.uname.$error.minlength">Minimum length required is 4</span>
<span ng-show="myForm.uname.$invalid">This field is invalid</span>
</td>
</tr>
<tr>
<td><input type="password" name="pwd" ng-model="ctrl.user.password" required/></td>
<td>
<span ng-show="myForm.pwd.$error.required">This a required field</span>
</td>
</tr>
<tr>
<td><input type="submit" value="Submit" ng-disabled="myForm.$invalid"/></td>
<td>
</tr>
</table>
</form>
</body>
</html>
<script type="text/javascript">
<!--
angular.module('notesApp',[])
.controller('MainCtrl',[function(){
var self=this;

self.submit=function(){
console.log("Username="+self.user.username+" Password="+self.user.password);
alert("Form submitted.");
};

}]);
//-->
</script>

效果：

输入前：

输入后：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航