若输入框有误,则点击立即注册,输入框的颜色会变成红色,在输入框中输入正确的值的过程中,输入框的边框变成正常的颜色。
<form action="" class="signup_form" method="post" name="checkForm" ng-init="isEmpty=false;">
<div 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 class="i_status" ng-show="checkFrom.account.$focused && checkForm.account.$viewValue && checkForm.account.$valid"></i>
</div>
<div class="tip_container">
<div class="input_tip" ng-if="checkForm.account.$focused">
<i></i>
<span>支持中文、字母、数字、“-”“_”的组合,4-20个字符</span>
</div>
<div class="input_tip" ng-messages="isEmpty && !checkForm.account.$focused && checkForm.account.$error" role="alert">
<span class="error_txt" ng-message="required"><i class="warn_error"></i>请输入用户名</span>
</div>
<div class="input_tip" ng-messages="checkForm.account.$blured && checkForm.account.$error" role="alert">
<span class="error_txt" ng-message="pattren"><i class="warn_error"></i>请输入正确的用户名</span>
</div>
<div class="correct" ng-if="checkFrom.account.$blured && checkForm.account.$viewValue && checkForm.account.$valid">
<span class="correct_text"></span>
</div>
</div>
<div class="form_item">
<button class="btn_register" ng-click="isEmpty=true; confirm()">立即注册</button>
<i class="sign_loading"></i>
</div>
</form>
.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<str.length;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');
}
}
}
求指点?
谢谢