angularjs表单验证有没有demo可以下载下来看看啊 跪求
老师 有没有demo可以下载看看啊 跪求 跪求 跪求
3 回答
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./common/bootstrap.min.css">
<script src="./common/angular1.7.js"></script>
<!-- <script src="./js/index.js"></script> -->
<style>
.red{
background:#f40;
}
.error{
border:1px solid #a10;
color:#f40;
}
.wrapper{
width:200px;
margin:0 auto;
}
</style>
<script>
//使用$scope作为dom里的一个域,1---创建和部署一个controller
angular.module('myApp',[])
.controller('SignUpController',function($scope){//控制器名称和一个回调函数
$scope.userdata={};//所有提交的表单数据存入此地
$scope.submitForm=function(){//提交时的一个提交函数
console.log($scope.userdata);
if($scope.signUpForm.$invalid){
alert("请检查您的信息");
}else{
alert("提交成功");
}
}
})
.directive('compare',function(){//2----传入用户数据和创建验证规则
var o={};//给一个对象
o.strict="AE";//作用在元素和属性上的
o.scope={//scope等于一个对象
orgText:'=compare'//之前的字符，原先的数据
}
o.require='ngModel';
o.link=function(sco,ele,att,con){//主函数，传参（域，当前元素，当前属性，ngModelcontroller）
con.$validators.compare=function(v){//用这个controller的validators加一个compare方法
return v==sco.orgText;//此回调函数传入一个值（用户输入的值），即新输入和原先输入的是否一样
}
sco.$watch('orgText',function(){//watch--orgText是否有变化
con.$validate();//一旦有变化，开始验证
})
}
return o;
})
</script>
</head>
<body ng-app="myApp" ng-controller="SignUpController">
<div class="wrapper">
<h2>注册</h2>
<form name="signUpForm" ng-submit="submitForm()">
<div class="form-group" ng-class="{'has-success':signUpForm.username.$valid}">
<label for="">用户名：</label>
<input
type="text"
name="username"
type="text"
ng-model="userdata.username"
required
ng-minlength="4"
ng-maxlength="12"
class="form-control">
<p class="error"
ng-if=
"(signUpForm.username.$error.minlength||
signUpForm.username.$error.maxlength)&&
signUpForm.username.$touched"
>用户名长度应在4-12位之间</p>
<p class="error"
ng-if=
"signUpForm.username.$error.required &&
signUpForm.username.$touched"
>用户名不能为空</p>
</div>
<div class="form-group" ng-class="{'has-success':signUpForm.password.$valid}">
<label for="">密码：</label>
<input
type="text"
name="password"
type="password"
ng-model="userdata.password"
required
ng-minlength="4"
ng-maxlength="12"
class="form-control">
<p class="error"
ng-if=
"(signUpForm.password.$error.minlength||
signUpForm.password.$error.maxlength)&&
signUpForm.password.$touched"
>用户名长度应在4-12位之间</p>
<p class="error"
ng-if=
"signUpForm.password.$error.required &&
signUpForm.password.$touched"
>密码不能为空</p>
</div>
<div class="form-group" ng-class="{'has-success':signUpForm.password2.$valid}">
<label for="">确认密码：</label>
<input
type="text"
name="password2"
type="password"
ng-model="userdata.password2"
compare="userdata.password"
required
class="form-control">
<p class="error"
ng-if=
"signUpForm.password2.$error.compare &&
signUpForm.password2.$touched"
>两次输入密码不一致</p>
<p class="error"
ng-if=
"signUpForm.password2.$error.required &&
signUpForm.password2.$touched"
>确认密码不能为空</p>
</div>
<div class="form-group">
<button class="btn btn-primary">登录</button>
</div>
</form>
</div>
</body>
</html>
举报
0/150
提交
取消
