首页 > 代码库 > 表单验证
表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/7-BoothStrap/CSS/bootstrap.css"/>
<style type="text/css">
.col-xs-5{
border: hidden;
margin-top: 10px;
text-align: center;
}
.row{
margin-top: 5px;
}
.sucess{
border-color:#3C763D ;
}
.sucess.focus{
border-color:#A94442 ;
}
</style>
</head>
<!--
angularJS 中的表单验证
1.表单中常用的验证操作
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录
$error 表单验证不通过的错误信息
2.验证时须给表单及需要验证的input设置name属性：
给form及input设置name后，会将form表单信息默认绑定到$scope作用域中
故可以使用formName.inputName.$验证操作得到验证结果：
例如：formName.inputName.$dirty="true" 表单被填写过
formName.inputName.$error.required="true" 表单必填但未填
error支持的验证有：required/minlength/pattern/email/date/url等
3.为避免冲突，例如使用type="email"时，H5也会进行验证操作。如果只想使用angularJS验证，可以使用
<form novalidate></form>属性，禁用H5自带验证功能
-->
<body ng-app="app" ng-controller="control">
<div class="container" style="width: 70%;margin: 50px;">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title" style="text-align: center;">
用户注册
</div>
</div>
<div class="panel-body">
<form name="myForm" invalidate>
<div class="row">
<div class="col-xs-3" style="text-align: center;">
用户名:
</div>
<div class="col-xs-9">
<input type="text" class="form-control " ng-model="user.name" name="name"
ng-minlength="4" ng-maxlength="10" required ng-class="{sucess:myForm.name.$invalid&&myForm.name.$dirty}"/>
<p style="color: red;margin: 0;" ng-show="myForm.name.$invalid&&myForm.name.$dirty">
<span ng-show="myForm.name.$error.required">用户名必须填写</span>
<span ng-show="myForm.name.$error.minlength">用户名至少包含四个字符！</span>
<span ng-show="myForm.name.$error.maxlength">用户名不能大于十个</span>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-3" style="text-align: center;">
邮箱:
</div>
<div class="col-xs-9">
<input type="email" class="form-control" ng-model="user.mail" name="email" required/>
<p style="color: red;margin: 0;" ng-show="myForm.email.$invalid&&myForm.email.$dirty">
<span ng-show="myForm.email.$error.required">邮箱必须填写</span>
<span ng-show="myForm.email.$error.email">格式不合法</span>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-3" style="text-align: center;">
密码:
</div>
<div class="col-xs-9">
<input type="password" class="form-control"ng-model="user.pwd" name="pwd"
required pattern="^\w{6,18}$"/>
<p style="color: red;margin: 0;" ng-show="myForm.pwd.$invalid&&myForm.pwd.$dirty">
<span ng-show="myForm.pwd.$error.pattern">密码为6-18位，且</span>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-3" style="text-align: center;">
密码确认:
</div>
<div class="col-xs-9">
<input type="password" class="form-control" ng-model="user.re" name="repwd" required/>
<p style="color: red;margin: 0;" ng-show="myForm.repwd.$dirty&&myForm.repwd!=user.pwd">
两次密码输入不一致
</p>
</div>
</div>
<div class="row">
<div class="col-xs-5" style="text-align: center;">
<input type="submit" value="http://www.mamicode.com/注册" class="btn-primary" ng-disabled="myForm.$dirty&&myForm.$invalid"/>
</div>
<div class="col-xs-5">
<input type="button" class="btn-warning" value="http://www.mamicode.com/重置" ng-click="resets()"/>
</div>
</div>
</form>
</div>
</div>
<pre>
{{myForm.name.$error}}
</pre>
</div>
</body>
<script src="http://www.mamicode.com/libs/angular.js"></script>
<script type="text/javascript">
/*
*/
angular.module("app",[])
.controller("control",function($scope){
$scope.initUser={
name:"李四",
mail:"56a4s56a@qq.com",
pwd:"123456"
}
$scope.resets=function(){
$scope.user=angular.copy($scope.initUser);
}
// $scope.resets();
})
</script>
</html>
表单验证