Javascript 使用多步骤形式的angularJS进行验证
我有一个多步骤的表格Javascript 使用多步骤形式的angularJS进行验证,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我有一个多步骤的表格 <div ng-init="tab=1"> <form name="mf" novalidate ng-submit="mfCtrl.postForm()" > <div ng-show="tab===1"> <div class="form-group "> <label for="exampleInputEmail1">Full Name</labe
<div ng-init="tab=1">
<form name="mf" novalidate ng-submit="mfCtrl.postForm()" >
<div ng-show="tab===1">
<div class="form-group ">
<label for="exampleInputEmail1">Full Name</label>
<input type="text" class="form-control" placeholder="Name" name="name" ng-model="mfCtrl.inputData.name" required />
<div class="error" ng-show="mf.name.$invalid && submitted">
<small class="error" ng-show="mf.name.$error.required">
Your name is required.
</small>
</div>
</div>
<button type="button" class="btn btn-primary next" ng-click="tab=2" >Next</button>
</div>
<div ng-show="tab===2">
<div class="form-group">
<label for="exampleInputEmail1">Mobile</label>
<input type="text" class="form-control inputfield" id="exampleInputEmail1" maxlength="10" placeholder="Mobile" name="mobile" ng-model="mfCtrl.inputData.mobile" ng-minlength=10 ng-pattern="/^[0-9]{1,10}$/" required />
<div class="error" ng-show="submitted && mf.mobile.$invalid">
<small class="error" ng-show="mf.mobile.$error.required">
Your mobile number is required.
</small>
</div>
</div>
<button type="button" class="btn btn-primary next" ng-click="tab=3" >Next</button>
</div>
<div ng-show="tab===3">
</div>
</form>
</div>
全名
你的名字是必需的。
下一个
可移动的
需要您的手机号码。
下一个
注意-我不想禁用我的按钮，但在按钮点击时显示错误。注意：这不是对这个问题的直接回答，而是建议 我曾参与过一个项目，其中需要精确的东西，包括多步骤向导、验证、数据保存等等。当我开始使用ui路由器时，最后它出现了很多bug，然后我发现了一个非常出色的模块：它节省了我很多时间，而且没有bug。它具有验证、数据保存等功能 您可能需要 此外，我想（我不确定它是否会起作用，请尝试：），如果您使用ng而不是ng show，您可以尝试使用ng：
<form name="mf" novalidate ng-submit="mfCtrl.postForm()" >
<div ng-if="tab===1">
<div class="form-group ">
<label for="exampleInputEmail1">Full Name</label>
<input type="text" class="form-control" placeholder="Name" name="name" ng-model="mfCtrl.inputData.name" required />
<div class="error" ng-show="mf.name.$invalid && submitted">
<small class="error" ng-show="mf.name.$error.required">
Your name is required.
</small>
</div>
</div>
<button type="button" class="btn btn-primary next" ng-click="tab=2" >Next</button>
</div>
<div ng-if="tab===2">
<div class="form-group">
<label for="exampleInputEmail1">Mobile</label>
<input type="text" class="form-control inputfield" id="exampleInputEmail1" maxlength="10" placeholder="Mobile" name="mobile" ng-model="mfCtrl.inputData.mobile" ng-minlength=10 ng-pattern="/^[0-9]{1,10}$/" required />
<div class="error" ng-show="submitted && mf.mobile.$invalid">
<small class="error" ng-show="mf.mobile.$error.required">
Your mobile number is required.
</small>
</div>
</div>
<button type="button" class="btn btn-primary next" ng-click="tab=3" >Next</button>
</div>
<div ng-if="tab===3">
</div>
全名
你的名字是必需的。
下一个
可移动的
需要您的手机号码。
下一个
在撞了我的头一天后，我终于找到了解决办法。因此，任何希望使用AngularJS创建易于验证的多步骤表单的人都可以使用以下代码：
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cctab= 1;
$scope.submitted = false;
$scope.go = function() {
if ($scope.signup_form.$valid) { // Submit as normal
$scope.cctab=2;
} else {
$scope.signup_form.submitted = true;
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
{{cctab}}
<form name="signup_form" ng-submit="signupForm()" novalidate>
<div ng-show="cctab===1">
<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=3 ng-maxlength=20 required />
<div class="error" ng-show="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>
<input type="button" ng-click="go()" value="next" >
</div>
<div ng-show="cctab===2">
<input type="text" name="username" id="name" placeholder="lname"/>
<input type="button" >
</div>
</form>
</body>
var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.cctab=1；
$scope.submitted=false；
$scope.go=函数（）{
如果（$scope.signup\u form.$valid）{//正常提交
$scope.cctab=2；
}否则{
$scope.signup\u form.submitted=true；
}
}
});
{{cctab}}
你的名字
你的名字是必需的。
您的姓名必须至少包含3个字符
您的姓名不能超过20个字符