                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /Angular
                        
                        /AngularJS表單驗(yàn)證

誰(shuí)有老師的源代碼，能發(fā)一下給我嗎，謝謝

????誰(shuí)有老師的源代碼，能發(fā)一下給我嗎，謝謝

慕仰5658343

2018-04-01

源自：AngularJS表單驗(yàn)證 4-3

關(guān)注問(wèn)題我要回答

997

操作

收起

4 回答

慕無(wú)忌7233295
2022-04-02

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

堅(jiān)持到退休
2018-12-05

<!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">

? ? <link rel="stylesheet" href="./common/font_awesome/css/font-awesome.css">

? ? <script src="./common/angular1.7.js"></script>

? ?

? ? <style>

? ? ? .input_result{

? ? ?position:relative;

? ? ?top:-27px;

? ? ?left:180px;

? ?}

? ?.error{? ? ?

? ? ?color:#a10;

? ?}

? ?/*p.error{

? ? ?display:none;

? ?}*/

? ?p.success{

? ? ?color:#3c763d;

? ?}

? ?input.error{

? ? ?border:1px solid #a10;

? ?}

? ?.wrapper{

? ? ?width:200px;

? ? ?margin:30px auto;

? ?}

? ? </style>

? ? <script>

? ? ? ? //使用$scope作為dom里的一個(gè)域,1---創(chuàng)建和部署一個(gè)controller

angular.module('myApp',[])

? ? .controller('SignUpController',function($scope){//控制器名稱和一個(gè)回調(diào)函數(shù)

? ? $scope.userdata={};//所有提交的表單數(shù)據(jù)存入此地

? ? $scope.submitForm=function(){//提交時(shí)的一個(gè)提交函數(shù)

? ? ? ? console.log($scope.userdata);

? ? ? ? if($scope.signUpForm.$invalid){

? ? ? ? ? ? alert("請(qǐng)檢查您的信息");

? ? ? ? }else{

? ? ? ? ? ? alert("提交成功");

? ? ? ? }

? ? }

? ??

})

? ? .directive('compare',function(){//2----傳入用戶數(shù)據(jù)和創(chuàng)建驗(yàn)證規(guī)則

? ? ? ? var o={};//給一個(gè)對(duì)象

? ? ? ? o.strict="AE";//作用在元素和屬性上的

? ? ? ? o.scope={//scope等于一個(gè)對(duì)象

? ? ? ? ? ? orgText:'=compare'//之前的字符，原先的數(shù)據(jù)

? ? ? ? }

? ? ? ? o.require='ngModel';

? ? ? ? o.link=function(sco,ele,att,con){//主函數(shù)，傳參（域，當(dāng)前元素，當(dāng)前屬性，ngModelcontroller）

? ? ? ? ? ? con.$validators.compare=function(v){//用這個(gè)controller的validators加一個(gè)compare方法

? ? ? ? ? ? ? ? return v==sco.orgText;//此回調(diào)函數(shù)傳入一個(gè)值（用戶輸入的值），即新輸入和原先輸入的是否一樣

? ? ? ? ? ? }

? ? ? ? ? ? sco.$watch('orgText',function(){//watch--orgText是否有變化

? ? ? ? ? ? ? ? con.$validate();//一旦有變化，開(kāi)始驗(yàn)證

? ? ? ? ? ? })

? ? ? ? }

? ? ? ? return o;

})

? ? </script>

</head>

? ??

? ? ? ? <div class="wrapper">

? ? ? ? ? ? <h2>注冊(cè)</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="fa fa-check input_result success" ng-if="signUpForm.username.$valid"></p>

? ? ? ? ? ? ? ? ? ? <p class="error"

? ? ? ? ? ? ? ? ? ? ng-if=

? ? ? ? ? ? ? ? ? ? "(signUpForm.username.$error.minlength||

? ? ? ? ? ? ? ? ? ? signUpForm.username.$error.maxlength)&&?

? ? ? ? ? ? ? ? ? ? signUpForm.username.$touched"

? ? ? ? ? ? ? ? ? ? >用戶名長(zhǎng)度應(yīng)在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="fa fa-check input_result success" ng-if="signUpForm.password.$valid"></p>

? ? ? ? ? ? ? ? <p class="error"

? ? ? ? ? ? ? ? ? ? ng-if=

? ? ? ? ? ? ? ? ? ? "(signUpForm.password.$error.minlength||

? ? ? ? ? ? ? ? ? ? signUpForm.password.$error.maxlength)&&?

? ? ? ? ? ? ? ? ? ? signUpForm.password.$touched"

? ? ? ? ? ? ? ? ? ? >用戶名長(zhǎng)度應(yīng)在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="">確認(rèn)密碼：</label>

? ? ? ? ? ? ? ?<input?

? ? ? ? ? ? ? ?type="text"?

? ? ? ? ? ? ? ?name="password2"?

? ? ? ? ? ? ? ?type="password"?

? ? ? ? ? ? ? ?ng-model="userdata.password2"

? ? ? ? ? ? ? ?compare="userdata.password"

? ? ? ? ? ? ? ?required

? ? ? ? ? ? ? ?class="form-control">

? ? ? ? ? ? ? ?<p class="fa fa-check input_result success" ng-if="signUpForm.password2.$valid"></p>

? ? ? ? ? ? ? ?<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"

? ? ? ? ? ? ? ? ? ? >確認(rèn)密碼不能為空</p>

? ? ? ? ? ? </div>

? ? ? ? ? ? <div class="form-group">

? ? ? ? ? ? ? ?<button class="btn btn-primary">登錄</button>

? ? ? ? ? ? </div>

? ? ? ? ? ? </form>??

? ? ? ? </div>? ? ? ?

</body>

</html>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

堅(jiān)持到退休
2018-12-04

<!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>

? ?

? ? <style>

? ? ? ? .red{

? ? ? ? ? ? background:#f40;

? ? ? ? }

? ? ? ? .error{

? ? ? ? ? ? border:1px solid #a10;

? ? ? ? ? ? color:#f40;

? ? ? ? }

? ? ? ? .wrapper{

? ? ? ? ? ? width:200px;

? ? ? ? ? ? margin:0 auto;

? ? ? ? }

? ? </style>

? ? <script>

? ? ? ? //使用$scope作為dom里的一個(gè)域,1---創(chuàng)建和部署一個(gè)controller

angular.module('myApp',[])

? ? .controller('SignUpController',function($scope){//控制器名稱和一個(gè)回調(diào)函數(shù)

? ? $scope.userdata={};//所有提交的表單數(shù)據(jù)存入此地

? ? $scope.submitForm=function(){//提交時(shí)的一個(gè)提交函數(shù)

? ? ? ? console.log($scope.userdata);

? ? ? ? if($scope.signUpForm.$invalid){

? ? ? ? ? ? alert("請(qǐng)檢查您的信息");

? ? ? ? }else{

? ? ? ? ? ? alert("提交成功");

? ? ? ? }

? ? }

? ??

})

? ? .directive('compare',function(){//2----傳入用戶數(shù)據(jù)和創(chuàng)建驗(yàn)證規(guī)則

? ? ? ? var o={};//給一個(gè)對(duì)象

? ? ? ? o.strict="AE";//作用在元素和屬性上的

? ? ? ? o.scope={//scope等于一個(gè)對(duì)象

? ? ? ? ? ? orgText:'=compare'//之前的字符，原先的數(shù)據(jù)

? ? ? ? }

? ? ? ? o.require='ngModel';

? ? ? ? o.link=function(sco,ele,att,con){//主函數(shù)，傳參（域，當(dāng)前元素，當(dāng)前屬性，ngModelcontroller）

? ? ? ? ? ? con.$validators.compare=function(v){//用這個(gè)controller的validators加一個(gè)compare方法

? ? ? ? ? ? ? ? return v==sco.orgText;//此回調(diào)函數(shù)傳入一個(gè)值（用戶輸入的值），即新輸入和原先輸入的是否一樣

? ? ? ? ? ? }

? ? ? ? ? ? sco.$watch('orgText',function(){//watch--orgText是否有變化

? ? ? ? ? ? ? ? con.$validate();//一旦有變化，開(kāi)始驗(yàn)證

? ? ? ? ? ? })

? ? ? ? }

? ? ? ? return o;

})

? ? </script>

</head>

? ??

? ? ? ? <div class="wrapper">

? ? ? ? ? ? <h2>注冊(cè)</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"

? ? ? ? ? ? ? ? ? ? >用戶名長(zhǎng)度應(yīng)在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"

? ? ? ? ? ? ? ? ? ? >用戶名長(zhǎng)度應(yīng)在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="">確認(rèn)密碼：</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"

? ? ? ? ? ? ? ? ? ? >確認(rèn)密碼不能為空</p>

? ? ? ? ? ? </div>

? ? ? ? ? ? <div class="form-group">

? ? ? ? ? ? ? ?<button class="btn btn-primary">登錄</button>

? ? ? ? ? ? </div>

? ? ? ? ? ? </form>??

? ? ? ? </div>? ? ? ?

</body>

</html>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

伊貓
2018-04-08

跟著視頻一個(gè)一個(gè)敲的，lib文件夾里的文件也是按照視頻里的要求下的，也算是源文件了吧。

https://pan.baidu.com/s/1a8A7DD573IlPoJCVJElKnA

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

舉報(bào)

0/150

提交

取消

AngularJS表單驗(yàn)證

參與學(xué)習(xí) 39415 人
解答問(wèn)題 140 個(gè)

一看就明白的AngularJS表單驗(yàn)證

進(jìn)入課程

誰(shuí)有老師的源代碼，能發(fā)一下給我嗎，謝謝

我要回答關(guān)注問(wèn)題

使用 Ctrl+D 可將網(wǎng)站添加到書(shū)簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

誰(shuí)有老師的源代碼，能發(fā)一下給我嗎，謝謝

4 回答

誰(shuí)有老師的源代碼，能發(fā)一下給我嗎，謝謝

誰(shuí)有老師的源代碼，能發(fā)一下給我嗎，謝謝

誰(shuí)有老師的源代碼，能發(fā)一下給我嗎，謝謝