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

信息輸入驗(yàn)證成功后，表單下方為什么會(huì)出現(xiàn)空白部分，如何去掉？

源代碼：

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

? ?<link rel="stylesheet" href="./libs/bootstrap.min.css">

? ?<link rel="stylesheet" href="./libs/font-awesome.min.css">

? ?<style>

? ? ? ?.wrapper{

? ? ? ? ? ?width: 240px;

? ? ? ? ? ?margin: 20px auto;

? ? ? ?}

? ? ? ?.error{

? ? ? ? ? ?color: #a30;

? ? ? ?}

? ? ? ?p.success{

? ? ? ? ? ?color: #5bc648;

? ? ? ?}

? ? ? ?.input-check{

? ? ? ? ? ?position: relative;

? ? ? ? ? ?top: -30px;

? ? ? ? ? ?left: 215px;

? ? ? ?}

? ? ? ?input.error{

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

? ? ? ?}

? ?</style>

? ?<title>Document</title>

</head>

? ?<div class="wrapper">

? ? ? ?<h2>新用戶注冊(cè)</h2>

? ? ? ?<form name="signUpForm" ng-submit="submitForm()" action="">

? ? ? ? ? ?<div class="form-group" ng-class="{ 'success': signUpForm.username.$valid">

? ? ? ? ? ? ? ?<label for="">用戶名：</label>

? ? ? ? ? ? ? ?<input type="text"

? ? ? ? ? ? ? ? ? ? ? name="username"

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

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

? ? ? ? ? ? ? ? ? ? ? ng-minlength="4"

? ? ? ? ? ? ? ? ? ? ? ng-maxlength="32"

? ? ? ? ? ? ? ? ? ? ? required>

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

? ? ? ? ? ? ? ?<p class="error" ng-if="signUpForm.username.$error.required && signUpForm.username.$touched">用戶名不能為空！</p>

? ? ? ? ? ? ? ?<p class="error" ng-if="(signUpForm.username.$error.minlength ||

? ? ? ? ? ? ? ? ? signUpForm.username.$error.maxlength) && signUpForm.username.$touched">用戶名的長(zhǎng)度應(yīng)在4-32位之間！</p>

? ? ? ? ? ?</div>

? ? ? ? ? ?<div class="form-group" ng-class="{'success': signUpForm.password.$valid}">

? ? ? ? ? ? ? ?<label for="">密碼：</label>

? ? ? ? ? ? ? ?<input type="password"

? ? ? ? ? ? ? ? ? ? ? name="password"

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

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

? ? ? ? ? ? ? ? ? ? ? ng-minlength="8"

? ? ? ? ? ? ? ? ? ? ? ng-maxlength="32"

? ? ? ? ? ? ? ? ? ? ? required>

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

? ? ? ? ? ? ? ?<p class="error" ng-if="signUpForm.password.$error.required && signUpForm.password.$touched">密碼不能為空！</p>

? ? ? ? ? ? ? ?<p class="error" ng-if="(signUpForm.password.$error.minlength ||

? ? ? ? ? ? ? ? ? signUpForm.password.$error.maxlength) && signUpForm.password.$touched">密碼長(zhǎng)度應(yīng)在8-32之間</p>

? ? ? ? ? ?</div>

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

? ? ? ? ? ? ? ?<label for="">確認(rèn)密碼：</label>

? ? ? ? ? ? ? ?<input type="password"

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

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

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

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

? ? ? ? ? ? ? ? ? ? ? required>

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

? ? ? ? ? ? ? ?<p class="error" ng-if="signUpForm.password2.$error.compare && signUpForm.password2.$touched">兩次密碼輸入不一致！</p>

? ? ? ? ? ?</div>

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

? ? ? ? ? ? ? ?<button class="btn btn-primary">提交</button>

? ? ? ? ? ?</div>

? ? ? ?</form>

? ?</div>

? ?

? ?<script src="./libs/angular.min.js"></script>

? ?<script src="./js/main.js"></script>

</body>

</html>

哈嚕嚕呦吧啦

2018-09-28

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

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

1012

操作

收起

1 回答

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

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

收起回答

舉報(bào)

0/150

提交

取消

AngularJS表單驗(yàn)證

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

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

進(jìn)入課程

信息輸入驗(yàn)證成功后，表單下方為什么會(huì)出現(xiàn)空白部分，如何去掉？

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

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

微信客服

購(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,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

信息輸入驗(yàn)證成功后，表單下方為什么會(huì)出現(xiàn)空白部分，如何去掉？

1 回答

信息輸入驗(yàn)證成功后，表單下方為什么會(huì)出現(xiàn)空白部分，如何去掉？

信息輸入驗(yàn)證成功后，表單下方為什么會(huì)出現(xiàn)空白部分，如何去掉？

信息輸入驗(yàn)證成功后，表單下方為什么會(huì)出現(xiàn)空白部分，如何去掉？