39,087
社区成员
发帖
与我相关
我的任务
分享angularjs 验证（效果为按钮提交后显示出错误信息如：不能为空，不是纯数字，格式不正确，长度不够等）？
效果为按钮提交后显示出错误信息如：不能为空，不是纯数字，邮箱格式不正确，长度大于了11位，基本上就这些了，有个官网的列子不错，但是Demo一直不能正常运行。。。希望高手能写个Demo参考一下为谢！
DEmo出处：http://blog.csdn.net/Mchange/article/details/16946123 但是不能运行，这个是转载的
原文出处：Form validation with AngularJS (en)
DEmo出处：http://blog.csdn.net/Mchange/article/details/16946123 但是不能运行，这个是转载的
原文出处：Form validation with AngularJS (en)
...全文
请发表友善的回复…
发表回复
醉爱江南 2014-05-21
- 打赏
- 举报
嗯 基本上能用了 非常感谢@yr12333 ！
醉爱江南 2014-05-20
- 打赏
- 举报
如2楼上所说，改进后能实现那个效果，但是初步加载点击按钮确是没有效果的，这样就没法验证非空了，贴一下自己的源码
看能否有所改进的方案？：
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController" >
<fieldset>
<legend>Signup</legend>
<div class="row">
<div>
<label>Your name</label>
<input type="text"
placeholder="Name"
name="name"
ng-model="signup.name"
ng-minlength=3
ng-maxlength=20 required />
<div ng-show="sName">用户名不能为空</div>
<div class="error"
ng-show="signup_form.name.$dirty && signup_form.name.$invalid && signup_form.submitted">
<small class="error"
ng-show="signup_form.name.$error.required">
Your name is required.
</small>
<small class="error"
ng-show="signup_form.name.$error.minlength">
Your name is required to be at least 3 characters
</small>
<small class="error"
ng-show="signup_form.name.$error.maxlength">
Your name cannot be longer than 20 characters
</small>
</div>
</div>
</div>
<button type="submit" class="button radius">Submit</button>
</fieldset>
</form>
<script src="angular-1.2.15.min.js"></script>
<script >
var app=angular.module('app', []);
app.controller('signupController', ['$scope', function($scope) {
$scope.submitted = false;
$scope.signupForm = function() {
$scope.signup;
alert($scope.signup);
if ($scope.signup_form.$valid) {
// Submit as normal
alert("jobs");
var names=$scope.signup.name;
alert(names);
$scope.sName=false;
} else {
$scope.signup_form.submitted = true;
alert("hello");
var names="";
if(names==null||names==""){
$scope.sName=true;
}
$.scope.name;
alert( $.scope.name);
}
}
}]);
</script>
</body>
</html>
yr12333 2014-05-20
- 打赏
- 举报
<div class="error"
ng-show="signup_form.name.$dirty && signup_form.name.$invalid && signup_form.submitted">
改为
<div class="error"
ng-show="signup_form.submitted">
醉爱江南 2014-05-19
- 打赏
- 举报
DEmo源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body ng-App="app">
<form name="signup_form" novalidate ng-submit="signupForm()" >
<fieldset>
<legend>Signup</legend>
<div class="row">
<div class="large-12 columns">
<label>Your name</label>
<input type="text"
placeholder="Name"
name="name"
ng-model="signup.name"
ng-minlength="5"
ng-maxlength="20" required ng-focus/>
<div class="error"
ng-show="signup_form.name.$dirty && signup_form.name.$invalid && signup_form.submitted">
<small class="error"
ng-show="signup_form.name.$error.required">
Your name is required.
</small>
<small class="error"
ng-show="signup_form.name.$error.minlength">
Your name is required to be at least 3 characters
</small>
<small class="error"
ng-show="signup_form.name.$error.maxlength">
Your name cannot be longer than 20 characters
</small>
</div>
</div>
</div>
</div>
<button type="submit" class="button radius">Submit</button>
</fieldset>
</form>
<script src="../lib/ionic/js/angular/angular.min.js"></script>
<script type="text/javascript">
var app=angular.module('app', []);
app.controller('signupController', ['$scope', function($scope) {
$scope.submitted = false;
$scope.signupForm = function() {
if ($scope.signup_form.$valid) {
// Submit as normal
} else {
$scope.signup_form.submitted = true;
}
}
}]);
</script>
</body>
</html>
yr12333 2014-05-19
- 打赏
- 举报
<form name="signup_form" novalidate ng-submit="signupForm()" >
加上
<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController" >
