<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<link href="css/bootstrap.css" rel="stylesheet">
<!--bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。-->
<style>
form .ng-pristine{background: #eee}
form .ng-dirty.ng-invalid{background: orangered}
form .ng-dirty.ng-valid{background: greenyellow}
/*定义input颜色:默认的为灰色,输入正确背景颜色为绿色,否则为红色*/
</style>
<script src="script/angular.min.js"></script>
<script>
var app=angular.module("myApp",[]);
app.controller("formCtrl",function($scope) {
$scope.addUser= function (userInfo) {
$scope.message = "用户名:" + userInfo.name +
userInfo.psw + "同意条款:" + userInfo.agreed
}
})
// 设置控制器,调用模型
</script>
</head>
<body class="container" ng-controller="formCtrl">
<div class="well">
<form name="myform" novalidate ng-submit="addUser(newUser)">
<p class="form-group"><label>
用户名:<input name="userName" type="text" class="form-control" required ng-model="newUser.name" ng-maxlength="8" ng-minlength="4"/>
<!--ng-model定义模型,下同-->
</label></p>
<p class="form-group"><label>
Email:<input name="userName" type="email" class="form-control" required ng-model="newUser.email" />
</label></p>
<p><label>
密码:<input name="userName" type="password" class="form-control" required ng-model="newUser.psw" ng-maxlength="8" ng-minlength="4" />
</label></p>
<p class="form-group">
<label>
<input name="agreed" type="checkbox" required ng-model="newUser.agreed"/>
我已阅读并同意用户条款
</label>
</p>
<p class="form-group">
<label>
<input name="agreed" type="text"required ng-model="newUser.english" ng-pattern="/[0-9]/">
<!--/[0-9]/正则表达式,只能输入数字-->
</label>
</p>
<p class="form-group">
<label><button type="submit" class="btn btn-primary" ng-disabled="myform.$invalid">注册</button>
<!--ng-disabled="myform.$invalid"表单信息全部正确此button才能使用-->
<button type="reset" class="btn btn-warning">重置</button>
</label>
</p>
</form>
</div>
<div class="well">
<p>验证信息:{{message}}</p>
<p>验证结果:{{myform.$valid}}</p>
</div>
<!--检测-->
</body>
</html>
(七)angular表单demo
最新推荐文章于 2020-11-27 11:13:48 发布