想要使用Angularjs验证而不是浏览器验证
Want to use Angularjs validation instead of Browser validation
我有一个表单，它包含两个ng表单，我在其中验证输入。关于我的表格，我有两个问题。
1） 在输入公司中，我想验证最小长度，但我的方法似乎不起作用。我该如何解决这个问题？
2） 我想在错误消息中使用Angularjs验证，但浏览器会自动显示"This input is invalid"，并且Internet Explorer根本不进行验证。我的错在哪里？我已经尝试过无效，并且需要ng，但我的表单没有经过验证就提交了。
这是plunkr链接：plunkr
提前感谢，YB-
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.billingAdrEqualsShippingAdr = false;
$scope.confirmBillingEqualsShipping = true;
$scope.changeBillingAddress = false;
$scope.shippingAddress = {};
$scope.billingAddress = {};
$scope.setBillingAddress = function (){
$scope.changeBillingAddress = true;
$scope.billingAddress = $scope.shippingAddress;
};
$scope.cancelBillingAddress = function (){
$scope.changeBillingAddress = false;
$scope.billingAddress = $scope.shippingAddress;
};
$scope.openCompanyModal = function (company){
$scope.billingAddress = company;
$scope.shippingAddress = company;
};
$scope.submit = function (){
console.log("Form submitted");
}
});<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="addressForm" ng-submit="submit()">
<div ng-form="shippingForm">
<div class="row">
<div class="col-md-12">
<h3 class="form-group">
<label>Lieferadresse</label>
</h3>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Salutation</label>
</div>
<div class="col-md-8">
<select name="salutation" ng-model="shippingAddress.salutation" class="form-control" ng-change="refreshBillingAddress()" ng-required="true">
<option></option>
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
<span ng-show="submitted && shippingForm.salutation.$error.required"></span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Firsname</label>
</div>
<div class="col-md-8">
<input type="text" name="prename" ng-model="shippingAddress.prename" ng-required="true" class="form-control" ng-change="refreshBillingAddress()"/>
<span ng-show="submitted && shippingForm.prename.$error.required">Required</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Lastname</label>
</div>
<div class="col-md-8">
<input type="text" name="surname" ng-model="shippingAddress.surname" required="" class="form-control" ng-change="refreshBillingAddress()"/>
<span ng-show="submitted && shippingForm.surname.$error.required">Required</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Company</label>
</div>
<div class="col-md-8">
<input type="text" name="company" ng-model="shippingAddress.company" required="" ng-minlength="10" class="form-control" ng-change="refreshBillingAddress()"/>
<span ng-show="submitted && shippingForm.company.$error.required">Required</span>
<span ng-show="submitted && shippingForm.company.$error.minlength">Minlength = 10</span>
</div>
</div>
</div >
<div class="row">
<div class="col-md-12">
<h3 class="form-group">
<label>Rechnungsadresse</label>
<div ng-click="setBillingAddress()" ng-show="changeBillingAddress === false" class="btn btn-default pull-right">Ändern</div>
<div ng-click="cancelBillingAddress()" ng-show="changeBillingAddress === true" class="btn btn-danger pull-right">Abbrechen</div>
</h3>
</div>
<div ng-show="changeBillingAddress == false" class="row">
<div class="col-md-offset-1">Identisch mit Lieferadresse</div>
</div>
</div>
<div ng-show="changeBillingAddress == true">
<div style="margin-top: 5px">
<div ng-form="billingForm">
<div class="row form-group">
<div class="col-md-4">
<label>Salutation</label>
</div>
<div class="col-md-8">
<select name="salutation" ng-model="billingAddress.salutation" ng-required="changeBillingAddress == true" class="form-control">
<option></option>
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
<span ng-show="submitted" class="help-block">Pflichtfeld</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Firstname</label>
</div>
<div class="col-md-8">
<input type="text" name="prename" ng-model="billingAddress.prename" ng-required="changeBillingAddress == true" class="form-control"/>
<span ng-show="submitted && billingForm.prename.required" class="help-block">Pflichtfeld</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Lastname</label>
</div>
<div class="col-md-8">
<input type="text" name="surname" ng-model="billingAddress.surname" ng-required="changeBillingAddress == true" class="form-control"/>
<span ng-show="submitted && billingForm.surname.$error.required"></span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Company</label>
</div>
<div class="col-md-8">
<input type="text" name="company" ng-model="billingAddress.company" ng-required="changeBillingAddress == true" class="form-control"/>
<span ng-show="submitted && billingForm.company.$error.required"></span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div style="padding-top: 1em" class="col-md-12">
<button ng-click="previousTab(0)" class="btn btn-default pull-left">Back</button>
<button type="submit" class="btn btn-default pull-right">Next</button>
</div>
</div>
</form>
</body>
</html>这是你的plunker，我更正了一些部分（直到Rechnungsaddresse）：
http://plnkr.co/edit/luVETXTVCf2PkNAKzK1Z?p=preview
我想你可以用<form name="addressForm"...或<div ng-form="addressForm"但两者似乎都会产生问题。
submitted从来没有设置过，所以我按照我想你想要的的方式添加了它
相关文章：
- 为什么浏览器为电子邮件验证正则表达式显示不同的反斜杠.如何防止这种情况发生
- 检查浏览器是否支持 HTML 验证
- 如何javascript验证<输入类型=文件多个>如果浏览器不支持多个
- 为什么不't浏览器在经过身份验证的XMLHttpRequest之后重用授权标头
- 想要使用Angularjs验证而不是浏览器验证
- Javascript/jQuery像浏览器一样验证电子邮件
- 使用本地浏览器身份验证的Javascript
- 如何验证ssl没有在浏览器中通过代理等进行拦截
- 是否有特定于浏览器的代码验证器
- 通过浏览器进行指纹注册和验证
- 在 Web 浏览器中禁用 Javascript 应禁用服务器验证控件
- 仅当浏览器无法验证表单时才使用表单验证 JavaScript
- 基于浏览器的应用程序使用 REST 服务进行身份验证
- 将数据保存在 ember 简单身份验证中的浏览器本地存储中
- 帮助用于验证码的图标类，如刷新，耳机，帮助不在浏览器上显示
- 是否可以验证浏览器Javascript会话的完整性
- 在发布到服务器之前进行一些客户端验证 - 浏览器问题
- 验证浏览器要求和设置
- AWS Cognito - JavaScript中的开发者身份验证(浏览器)
- 使用简单的正则表达式验证浏览器上传文件名和扩展名
