若輸入框有誤，則點(diǎn)擊立即注冊(cè)，輸入框的顏色會(huì)變成紅色，在輸入框中輸入正確的值的過(guò)程中，輸入框的邊框變成正常的顏色。

用??戶(hù)??名

id="form_item_account"

ng-model="account"

name="account"

required

ng-pattern="regularList.account"

ng-class="{'warnning':checkForm.account.$focused,'error':(!isEmpty && checkForm.account.$blured &&

checkForm.account.$error.pattern) || (isEmpty && checkForm.account.$invalid)}"

ng-blur="checkForm.account.$blured = true;checkForm.account.$focused = false;"

ng-focus="checkForm.account.$focused = true;checkForm.account.$blured = false;accountValid()"

autocomplete="off"

>

支持中文、字母、數(shù)字、“-”“_”的組合，4-20個(gè)字符

請(qǐng)輸入用戶(hù)名

請(qǐng)輸入正確的用戶(hù)名

立即注冊(cè)

.controller{

var form_account = $("#form_item_account");

var form_pwd = $("#form_item_password");

function getStringLength(str){

if(!str){

return;

}

var bytesCount = 0;

for(var i=0;i

var c=str.charAt(i);

if(/^[\u0000-\u00ff]&/.test(c)){

bytesCount+=1;

}else{

bytesCount+=2;

}

}

return bytesCount;

}

function onKeyupHandler(input,msg){

var item = input.parent();

if(!item.hasClass('form_item_error')){

item.addClass('form_item_error');

}

}

function hideError(input,msg){

var item = input.parent();

item.removeClass('form_item_error');

}

$scope.checkAcount = function(){

var reg = /^[A-Za-z0-9_\-\u4e00-\u9fa5]+$/;

form_account.on('keyup',function(e){

var value = $(this).val();

hideError(form_account);

if(value!='' && !reg.test(value)){

onKeyupHandler(form_account,errormsg)

}

})

}

$scope.confirm = function () {

$scope.accountValid = function(){

if($scope.checkForm.account.$error ){

$('#form_item_account').addClass('form_item_error');

}

}

}

求指點(diǎn)？

謝謝

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的html 输入框变红色,input输入框 输入错误时，点击注册按钮，输入框的边框变成红色，重新输入时，边框颜色恢复原来的，同时错误提示消失？...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。