幫我看看哪里出錯(cuò)了?
main.js
var app = angular.module("myApp", []);
app .controller('signUpController',function($scope){
?? ?$scope.userdata = {};
?? ?$scope.submitForm = function(){
?? ??? ?console.log($scope.userdata );
?? ??? ?if($scope.signUpFrom.$invalid){
?? ??? ??? ?alert('請檢查你的輸入信息!')
?? ??? ?}else{
?? ??? ??? ?alert('輸入正確!')
?? ??? ?}
?? ?}
})
app .directive('compare', function()
{
?? ?var o = {};
?? ?o.strict = 'AE';
?? ?o.scope ={
?? ??? ?orgText:'=compare'
?? ?}
?? ?o.require = 'ngModel';
?? ?o.link = function(sco,ele,att,con){/*主函數(shù)*/
?? ??? ?con.$validators.compare = function(v){
?? ??? ??? ?return v == sco.orgText;
?? ??? ?}
?? ??? ?
?? ??? ?sco.watch('orgText',function(){
?? ??? ??? ?con.$validate();
?? ??? ?});
?? ?}
?? ?return o;
})
代碼
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8" />
?? ??? ?<title>驗(yàn)證規(guī)則</title>
?? ??? ?<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
?? ??? ?<style type="text/css">
?? ??? ??? ?.red{
?? ??? ??? ??? ?background: #a30;
?? ??? ??? ?}
?? ??? ??? ?.error{
?? ??? ??? ??? ?color: #a10;
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?input.error{
?? ??? ??? ??? ?border: 1px solid #a10;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?.wrapper{
?? ??? ??? ??? ?width: 300px;
?? ??? ??? ??? ?margin: 30px auto;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body ng-app="myApp" ng-controller="signUpController">
?? ??? ?<div class="wrapper">
?? ??? ??? ?<h2>注冊</h2>
?? ??? ??? ?<form name="signUpFrom" ng-submit="submitForm()">
?? ??? ??? ??? ?<div class="form-group">
?? ??? ??? ??? ??? ?<label> 用戶名</label>
?? ??? ??? ??? ??? ?<pre>合法:{{signUpFrom.username.$valid}}</pre>
?? ??? ??? ??? ??? ?<pre>{{userdata.username}}</pre>
?? ??? ??? ??? ??? ?<input
?? ??? ??? ??? ??? ??? ? name="username"
?? ??? ??? ??? ??? ??? ? type="text"
?? ??? ??? ??? ??? ??? ? class="form-control"
?? ??? ??? ??? ??? ??? ? ng-model="userdata.username"
?? ??? ??? ??? ??? ??? ? ng-minlength="4"
?? ??? ??? ??? ??? ??? ? ng-maxlength="10"
?? ??? ??? ??? ??? ??? ? required
?? ??? ??? ??? ??? ??? ?? />
?? ??? ??? ??? ??? ?<p class="error" ng-if="
?? ??? ??? ??? ??? ??? ? signUpFrom.username.$error.required
?? ??? ??? ??? ??? ??? ?&& signUpFrom.username.$touched">
?? ??? ??? ??? ??? ??? ?用戶名不可為空
?? ??? ??? ??? ??? ?</p>
?? ??? ??? ??? ??? ?<p class="error" ng-if="
?? ??? ??? ??? ??? ??? ?? (signUpFrom.username.$error.minlength
?? ??? ??? ??? ??? ??? ?||signUpFrom.username.$error.maxlength)
?? ??? ??? ??? ??? ??? ?&& signUpFrom.username.$touched">
?? ??? ??? ??? ??? ??? ?用戶名長度應(yīng)該在4到10位
?? ??? ??? ??? ??? ?</p>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<div class="form-group">
?? ??? ??? ??? ??? ?<label> 密碼</label>
?? ??? ??? ??? ??? ?<pre>合法:{{signUpFrom.password.$valid}}</pre>
?? ??? ??? ??? ??? ?<pre>{{userdata.password}}</pre>
?? ??? ??? ??? ??? ?<input name="password"
?? ??? ??? ??? ??? ??? ?type="password"
?? ??? ??? ??? ??? ??? ?class="form-control"
?? ??? ??? ??? ??? ??? ?ng-model="userdata.password"
?? ??? ??? ??? ??? ??? ?ng-minlength="6"
?? ??? ??? ??? ??? ??? ?ng-maxlength="255"
?? ??? ??? ??? ??? ??? ?required
?? ??? ??? ??? ??? ??? ? />
?? ??? ??? ??? ??? ?<p class="error" ng-if="
?? ??? ??? ??? ??? ??? ?signUpFrom.password.$error.required &&
?? ??? ??? ??? ??? ??? ?signUpFrom.password.$touched">
?? ??? ??? ??? ??? ??? ?密碼不可為空
?? ??? ??? ??? ??? ?</p>
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?<p class="error" ng-if="
?? ??? ??? ??? ??? ??? ?(signUpFrom.password.$error.minlength ||
?? ??? ??? ??? ??? ??? ? signUpFrom.password.$error.maxlength )&&
?? ??? ??? ??? ??? ??? ?signUpFrom.password.$touched">
?? ??? ??? ??? ??? ??? ?密碼長度在6位到255之間
?? ??? ??? ??? ??? ?</p>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<div class="form-group">
?? ??? ??? ??? ??? ?<label> 確認(rèn)密碼</label>
?? ??? ??? ??? ??? ?<pre>合法:{{signUpFrom.password2.$valid}}</pre>
?? ??? ??? ??? ??? ?<pre>{{userdata.password2}}</pre>
?? ??? ??? ??? ??? ?<input name="password2"
?? ??? ??? ??? ??? ??? ?type="password"
?? ??? ??? ??? ??? ??? ?class="form-control"
?? ??? ??? ??? ??? ??? ?ng-model="userdata.password2"
?? ??? ??? ??? ??? ??? ?compare ="userdata.password"
?? ??? ??? ??? ??? ??? ?required
?? ??? ??? ??? ??? ??? ? />
?? ??? ??? ??? ??? ?<p class="error" ng-if="
?? ??? ??? ??? ??? ??? ?signUpFrom.password2.$error.compare &&
?? ??? ??? ??? ??? ??? ?signUpFrom.password2.$touched">
?? ??? ??? ??? ??? ??? ?倆次密碼輸入不一致
?? ??? ??? ??? ??? ?</p>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<div class="form-group">
?? ??? ??? ??? ??? ?<button class="btn btn-primary">注冊</button>
?? ??? ??? ??? ?</div>
?? ??? ??? ?</form>
?? ??? ??? ?
?? ??? ?</div>
?? ??? ?
?? ??? ?
?? ??? ?<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
?? ??? ?<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
?? ?</body>
</html>
當(dāng)密碼輸入達(dá)到6位后自動(dòng)消失了!請大神指點(diǎn)我哪里出錯(cuò)了
2016-09-13
終于找到問題了!還是不夠認(rèn)真啊~~~
2016-09-13
2016-09-13
把js或者是確認(rèn)密碼的刪除上面就好了,但是我對了好幾遍找不到到底哪里有問題!