【发布时间】：2017-04-08 17:17:20
【问题描述】：
我正在尝试进行角度表单验证，同时面临以下难以清除的问题
1) 当我点击提交而不填写输入时，得到不是红色的验证消息，并且没有得到电话号码字段本身的验证消息
2）当我在名称文本框中输入类似内容时，我输入了我的名字并删除了所有字符，然后文本框变红，但不需要像名称这样的验证消息
3) 在开始输入其显示信息的电子邮件中，请输入有效的邮件 ID
4) 在电话号码字段中，如果我输入字符，它会给出正确的验证消息，但如果我继续按下超过 10 个字符，它会给出请输入 10 位数字，我需要避免这种情况
这是我的小提琴https://jsfiddle.net/cL2q3z6v/
HTML：
<div ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<!-- PAGE HEADER -->
<div class="page-header"></div>
<!-- =================================================================== -->
<!-- FORM ============================================================== -->
<!-- =================================================================== -->
<!-- pass in the variable if our form is valid or invalid -->
<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate="" id="userForm">
<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
<label>Name*</label>
<input type="text" name="name" class="form-control" ng-model="user.name" required="" />
<p ng-show="userForm.name.$invalid && userForm.$submitted" class="help-block">Name is required.</p>
</div>
<!-- USERNAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required="" />
<p ng-show="userForm.username.$error.required && userForm.$submitted" class="help-block">Username is required.</p>
<p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
<p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>
<!-- EMAIL -->
<div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.email" required="" />
<p ng-show="userForm.email.$invalid && userForm.$submitted" class="help-block">Enter a valid email.</p>
</div>
<!-- PHONE -->
<div class="form-group" ng-class="{ 'has-error' : userForm.phone.$invalid && !userForm.phone.$pristine }">
<label>Phone Number</label>
<input type="text" name="phone" class="form-control" ng-model="user.phone" ng-pattern="phoneNumbr" ng-maxlength="10" placeholder="+91-636-78658" />
<p ng-show="userForm.phone.$error.required && userForm.$submitted" class="help-block">Phone number is Required</p>
<p ng-show="userForm.phone.$error.maxlength" class="help-block">Ten digit Required</p>
<p ng-show="userForm.phone.$error.pattern" class="help-block">Please enter digits like 9964289813</p>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Gender</label>
<div class="col-lg-5">
<div class="radio">
<label><input type="radio" name="gender" value="male" ng-model="user.gender" ng-required="!user.gender"/> Male</label>
</div>
<div class="radio">
<label><input type="radio" name="gender" value=
"female" ng-model="user.gender" ng-required="!user.gender"/> Female</label>
</div>
<div class="radio">
<label><input type="radio" name="gender" value=
"other" ng-model="user.gender" ng-required="!user.gender"/> Other</label>
</div>
<p ng-show="userForm.gender.$error.required && userForm.$submitted" class="help-block">Gender is Required</p>
</div>
</div>
<div class="form-group">
<label class="col-lg-5 control-label">Country</label>
<div class="col-lg-5">
<select name="country" class="form-control" required="" ng-model="user.country">
<option value="">Select a country</option>
<option value="AU">Australia</option>
<option value="CA">Canada</option>
<option value="FR">France</option>
</select>
<p ng-show="userForm.country.$error.required && userForm.$submitted" class="help-block">country is Required</p>
</div>
</div>
<div class="form-group">
<label class="col-lg-5 control-label">Browser</label>
<div class="col-lg-5">
<div class="checkbox">
<label>
<input type="checkbox" name="browsers" value="chrome" ng-model="user.browser['chrome']" ng-required="!browser(user.browser)"/> Google Chrome</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="browsers" value="firefox" ng-model="user.browser['firefox']" ng-required="!browser(user.browser)"/> Firefox</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="browsers" value="ie" ng-model="user.browser['ie']" ng-required="!browser(user.browser)"/> IE</label>
</div>
<p ng-show="userForm.browsers.$error.required && userForm.$submitted" class="help-block">Browser is Required</p>
</div>
</div><br />
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
脚本
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.phoneNumbr = /^\+?\d{2}[- ]?\d{3}[- ]?\d{5}$/;
$scope.browser = function (object) {
return Object.keys(object).some(function (key) {
return object[key];
});
}
$scope.user = {};
$scope.user.browser = {};
// function to submit the form after all validation has occurred
$scope.submitForm = function(isValid) {
// check to make sure the form is completely valid
if (isValid) {
alert('our form is amazing');
}
};
});
【问题讨论】：
-
你到底想要什么？能不能说的清楚一点。