問題描述

1、當在輸入框中輸入的內(nèi)容不規(guī)范，提交form表單，input輸入框會提示錯誤，同時input的外層p邊框變成紅色，當我重新在輸入框輸入后，從第一個輸入的字符開始，外層的p邊框的顏色變成正常的顏色。

以下是代碼

<form action='' method='post' name='checkForm' ng-init='isEmpty=false;'> <p class='form_item form_item_account'><label for=''> 用&nbsp;&nbsp;戶&nbsp;&nbsp;名 </label><input type='text' placeholder='您的賬戶名和登錄名' ng-model='account'name='account'requiredng-pattern='regularList.account'ng- ng-blur='checkForm.account.$blured = true;checkForm.account.$focused = false;'ng-focus='checkForm.account.$focused = true;checkForm.account.$blured = false;accountValid()'autocomplete='off'><i></i> </p> <p class='form_item'><button ng-click='isEmpty=true; confirm()'>立即注冊</button><i></i> </p></form>

js中添加form_item_error類，輸入框外層p邊框變成紅色，去掉這個類，外層p邊框變成正常的

function checkError(form){ var item = form.parent(); if(form.hasClass('error')){item.addClass('form_item_error'); }else if(item.hasClass('form_item_error')){ item.removeClass('form_item_error'); }else{item.removeClass('form_item_error'); }}$scope.confirm = function () { $scope.accountValid = function(){checkError(form_account); } }

效果錯誤時

在錯誤的情況下，輸入內(nèi)容，邊框回復(fù)正常求指點，謝謝

問題解答

我把你的代碼放到j(luò)sFiddle上了，改了下，可以達到了你的要求，如果看不到效果就要翻墻了。demo如下，你自己預(yù)覽下，另外幫你加上了表單不完整不能點提交按鈕。Demo

將ng-class放置外層包裹的p中即可，給wanning和error添加相應(yīng)的樣式即可