码迷,mamicode.com
首页 > Web开发 > 详细

Angular JS输入验证

时间:2015-12-28 00:44:12      阅读:273      评论:0      收藏:0      [点我收藏+]

标签:

 

<form name="mgForm" ng-app="myApp" ng-controller="validateCtrl" novalidate>
<p>用户名:<input type="text" name="user" ng-model="user" required><span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"><span ng-show="myForm.user.$error.required">用户名是必须的</span></span></p>
<p>邮箱:<input type="email"  name="email" ng-model="email" required><span style="color:red;" ng-show="mgForm.email.$dirty && mgForm.email.$invalid"><span ng-show=myForm.email.$error.required>邮箱是必须的</span><span ng-show="myForm.email.$error.email">非法邮箱</span></p>
<input type="submit" ng-disabled=“myForm.user.&dirty&&myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid”>
</form>
<script>
var app=angular.module("myApp",[]);
app.controller("validateCtrl",function($scope)
{
  $scope.user="John Doe";
  $scope.eamil="John.doe@gmail.com";

});
</script>

*当用户名为$dirty和¥invalid才显示字体为红色

$dirty:表单有填写记录   $valid:表单字段内容合法

$invalid:表单内容非法。$pristine:表单没有填写记录

地址:原文

Angular JS输入验证

标签:

原文地址:http://www.cnblogs.com/professional-NET/p/5081167.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!