angularjs 表单验证

1、首先给表单一个 name , 在对 input 进行校验时 也需要在 input 上添加一个 name。曾因 form 和 input 上没添加 name 而出问题

2、去除浏览器 自带的验证，在 form 上添加 novalidate

3、在 input 上进行验证，验证的类型有：

<div ng-app="myApp" ng-controller='formCtrl'>
			<form name="formName" role="form" novalidate>
				<!--必填项验证 s-->
				<div>
					<input type="text" name="name" ng-model="name" required />
					<span ng-show="formName.name.$dirty && formName.name.$invalid">
						<span ng-show="formName.name.$error.required">name is required</span>
					</span>
				</div>
				<!--必填项验证 e-->
				
				<!--最小长度验证 s-->
				<div>
					<input type="text" name="minLength" ng-model="minLength" ng-minlength="3" />
					<span ng-show="formName.minLength.$dirty && formName.minLength.$invalid">
						<span ng-show="formName.minLength.$error.minlength">
							最少3位
						</span>
					</span>
				</div>
				<!--最小长度验证 e-->
				
				<!--最大长度验证 s-->
				<div>
					<input type="text" name="maxLength" ng-model="maxLength" ng-maxlength="6" />
					<span ng-show="formName.maxLength.$dirty && formName.maxLength.$invalid">
						<span ng-show="formName.maxLength.$error.maxlength">
							最多6位
						</span>
					</span>
				</div>
				<!--最大长度验证 e-->
				
				<!--模式匹配验证 s -->
				<div>
					<input type="text" name="Pattern" ng-model="Pattern" ng-pattern="/[a-zA-Z]/" />
					<span ng-show="formName.Pattern.$dirty && formName.Pattern.$invalid">
						<span ng-show="formName.Pattern.$error.pattern">
							格式不对
						</span>
					</span>
				</div>
				<!--模式匹配验证 e -->
				
				<!--电子邮件验证 s -->
				<div>
					<input type="email" name="email" ng-model="email" required />
					<span ng-show="formName.email.$dirty && formName.email.$invalid">
						<span ng-show="formName.email.$error.required">Email is required</span>
						<span ng-show="formName.email.$error.email">Invalid Email Address</span>
					</span>
				</div>
				<!--电子邮件验证 e -->
				
				<!--数字验证 s -->
				<div>
					<input type="number" name="phone" ng-model="number" required length="10" />
					<span ng-show="formName.phone.$dirty && formName.phone.$invalid">
						数字格式
					</span>
				</div>
				<!--数字验证 e -->
				
				<!--url 验证 s -->
				<div>
					<input type="url" name="url" ng-model="url" required />
					<span ng-show="formName.url.$dirty && formName.url.$invalid">
						<span ng-show="formName.url.$error.required">
							url is required
						</span>
						<span ng-show="formName.url.$error.url">
							Invalid Url 
						</span>
					</span>
				</div>
				<!--url 验证 e -->
				
				<!--按钮显示控制 s -->
				<div>
					<input class="btn btn-primary btn-lg" type="submit" ng-disabled="formName.$invalid" value="提交" />
				</div>
				<!--按钮显示控制 s -->
				
			</form>
		</div>