1、当在输入框中输入的内容不规范,提交form表单,input输入框会提示错误,同时input的外层p边框变成红色,当我重新在输入框输入后,从第一个输入的字符开始,外层的p边框的颜色变成正常的颜色。
以下是代码
<form action="" class="signup_form" method="post" name="checkForm" ng-init="isEmpty=false;">
<p class="form_item form_item_account">
<label for=""> 用 户 名 </label>
<input type="text" class="form_account" placeholder="您的账户名和登录名"
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"
>
<i></i>
</p>
<p class="form_item">
<button class="btn_register" id="btn_register" 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添加相应的样式即可