angular.js - input输入框，边框随错误变化？

问题描述

1、当在输入框中输入的内容不规范，提交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); } }

效果错误时

在错误的情况下，输入内容，边框回复正常求指点，谢谢

问题解答

我把你的代码放到jsFiddle上了，改了下，可以达到了你的要求，如果看不到效果就要翻墙了。demo如下，你自己预览下，另外帮你加上了表单不完整不能点提交按钮。Demo

将ng-class放置外层包裹的p中即可，给wanning和error添加相应的样式即可