在模糊表单验证中使用 JavaScript 时遇到问题
having trouble with javascript on blur form validation
我不是JS最好的,但我正在尝试让表单即时验证客户端。我的问题是验证需要有效电子邮件且是强制性的电子邮件字段。强制性部分效果很好,但电子邮件验证部分不起作用。有人可以帮忙吗?下面是问题的笔和代码。
var defaultForm = (function() {
var init = function() {
// Initial hides
$('.error').hide();
};
return {
init: init
};
}());
(function() {
var
error = $('.error'),
isNotEmpty = false,
numberRegEx = /[0-9]|'./,
emailRegEx = /^(([^<>()'[']''.,;:'s@"]+('.[^<>()'[']''.,;:'s@"]+)*)|(".+"))@(('[[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}])|(([a-zA-Z'-0-9]+'.)+[a-zA-Z]{2,}))$/,
$this;
defaultForm.init();
// Check for empty mandatory fields
$('input').each(function() {
$(this).on('blur', function() {
$this = $(this);
if ($this.val() !== "" && $this.val() !== "---") {
isNotEmpty = true;
} else if (typeof($this.attr('required')) === typeof undefined) {
isNotEmpty = true;
} else {
isNotEmpty = false;
}
if (isNotEmpty === true) {
$this.closest('.has-feedback').addClass('has-success');
$this.closest('.has-feedback').removeClass('has-error');
$this.next('span').hide();
$this.parent().next('.error').hide();
} else {
$this.closest('.has-feedback').addClass('has-error');
$this.closest('.has-feedback').removeClass('has-success');
$this.next('span').show();
$this.parent().next('.error').show();
}
});
});
// Check for non-numeric input in number fields
$('input[type=number]').on('blur', function() {
$this = $(this);
if (numberRegEx.test($(this).val()) === true) {
$this.closest('.has-feedback').addClass('has-success');
$this.closest('.has-feedback').removeClass('has-error');
$this.next('span').hide();
} else {
$this.closest('.has-feedback').addClass('has-error');
$this.closest('.has-feedback').removeClass('has-success');
$this.next('span').show();
$this.next('span').html('<svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Please enter a valid number');
}
});
// Check for non-numeric input in number fields
$('input[type=emai]').on('blur', function() {
$this = $(this);
if (emailRegEx.test($(this).val()) === true) {
$this.closest('.has-feedback').addClass('has-success');
$this.closest('.has-feedback').removeClass('has-error');
$this.next('span').hide();
} else {
$this.closest('.has-feedback').addClass('has-error');
$this.closest('.has-feedback').removeClass('has-success');
$this.next('span').show();
$this.next('span').html('<svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Please enter a valid email address');
}
});
}());
.panel-grey {
background-color: #f8f8f8;
border: 1px solid #d6d7d7;
padding: 1.25rem;
margin-top: 1rem;
}
.icon {
width: 16px;
height: 16px;
}
.has-error .form-control {
border-color: #cc0000;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error span.error {
color: #cc0000;
}
.has-error span.error .icon {
fill: #cc0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div style="display:none">
<svg width="0" height="0" style="position:absolute">
<symbol viewBox="0 0 20 20" id="warning">
<path d="M19.512 17.982l-8.908-15.63a.696.696 0 0 0-1.208 0L.49 17.98c-.122.212-.12.47.004.68s.352.34.598.34h17.815c.244 0 .473-.13.598-.34s.126-.468.007-.68zm-8.412-.98H8.9v-2h2.2v2zm0-3.5H8.9v-6h2.2v6z"></path>
</symbol>
</svg>
</div>
<form>
<div class="panel-app-personal-name panel-grey">
<div class="form-group">
<label for="control_COLUMN4" class="col-sm-4">Name*</label>
<div class="col-sm-6 has-feedback">
<input type="" name="" class="form-control form-control-md" id="control_COLUMN4" placeholder="Full name" aria-describedby="nameTextFieldError" required="">
<span id="nameTextFieldError" class="error" style="display: none;"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Please enter your name</span>
</div>
<div class="clearfix"></div>
</div>
<div class="form-group">
<label for="control_EMAIL" class="col-sm-4">Email address*</label>
<div class="col-sm-6 has-feedback">
<input type="text" name="" class="form-control form-control-md" id="control_EMAIL" placeholder="Email address" aria-describedby="emailError" value="" required="">
<span id="emailError" class="error" style="display: none;"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Email address is mandatory</span>
</div>
<div class="clearfix"></div>
</div>
</form>
2 个小问题。
错过了$('input[type=emai]')
的l
。
和
您的电子邮件type="text"
:-
<input type="text" name="" class="form-control form-control-md" id="control_EMAIL" placeholder="Email address" aria-describedby="emailError" value="" required="">
var defaultForm = (function() {
var init = function() {
// Initial hides
$('.error').hide();
};
return {
init: init
};
}());
(function() {
var
error = $('.error'),
isNotEmpty = false,
numberRegEx = /[0-9]|'./,
emailRegEx = /^(([^<>()'[']''.,;:'s@"]+('.[^<>()'[']''.,;:'s@"]+)*)|(".+"))@(('[[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}])|(([a-zA-Z'-0-9]+'.)+[a-zA-Z]{2,}))$/,
$this;
defaultForm.init();
// Check for empty mandatory fields
$('input').each(function() {
$(this).on('blur', function() {
$this = $(this);
if ($this.val() !== "" && $this.val() !== "---") {
isNotEmpty = true;
} else if (typeof($this.attr('required')) === typeof undefined) {
isNotEmpty = true;
} else {
isNotEmpty = false;
}
if (isNotEmpty === true) {
$this.closest('.has-feedback').addClass('has-success');
$this.closest('.has-feedback').removeClass('has-error');
$this.next('span').hide();
$this.parent().next('.error').hide();
} else {
$this.closest('.has-feedback').addClass('has-error');
$this.closest('.has-feedback').removeClass('has-success');
$this.next('span').show();
$this.parent().next('.error').show();
}
});
});
// Check for non-numeric input in number fields
$('input[type=number]').on('blur', function() {
$this = $(this);
if (numberRegEx.test($(this).val()) === true) {
$this.closest('.has-feedback').addClass('has-success');
$this.closest('.has-feedback').removeClass('has-error');
$this.next('span').hide();
} else {
$this.closest('.has-feedback').addClass('has-error');
$this.closest('.has-feedback').removeClass('has-success');
$this.next('span').show();
$this.next('span').html('<svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Please enter a valid number');
}
});
// Check for non-numeric input in number fields
$('input[type=email]').on('blur', function() {
$this = $(this);
if (emailRegEx.test($(this).val()) === true) {
$this.closest('.has-feedback').addClass('has-success');
$this.closest('.has-feedback').removeClass('has-error');
$this.next('span').hide();
} else {
$this.closest('.has-feedback').addClass('has-error');
$this.closest('.has-feedback').removeClass('has-success');
$this.next('span').show();
$this.next('span').html('<svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Please enter a valid email address');
}
});
}());
.panel-grey {
background-color: #f8f8f8;
border: 1px solid #d6d7d7;
padding: 1.25rem;
margin-top: 1rem;
}
.icon {
width: 16px;
height: 16px;
}
.has-error .form-control {
border-color: #cc0000;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error span.error {
color: #cc0000;
}
.has-error span.error .icon {
fill: #cc0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div style="display:none">
<svg width="0" height="0" style="position:absolute">
<symbol viewBox="0 0 20 20" id="warning">
<path d="M19.512 17.982l-8.908-15.63a.696.696 0 0 0-1.208 0L.49 17.98c-.122.212-.12.47.004.68s.352.34.598.34h17.815c.244 0 .473-.13.598-.34s.126-.468.007-.68zm-8.412-.98H8.9v-2h2.2v2zm0-3.5H8.9v-6h2.2v6z"></path>
</symbol>
</svg>
</div>
<form>
<div class="panel-app-personal-name panel-grey">
<div class="form-group">
<label for="control_COLUMN4" class="col-sm-4">Name*</label>
<div class="col-sm-6 has-feedback">
<input type="" name="" class="form-control form-control-md" id="control_COLUMN4" placeholder="Full name" aria-describedby="nameTextFieldError" required="">
<span id="nameTextFieldError" class="error" style="display: none;"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Please enter your name</span>
</div>
<div class="clearfix"></div>
</div>
<div class="form-group">
<label for="control_EMAIL" class="col-sm-4">Email address*</label>
<div class="col-sm-6 has-feedback">
<input type="email" name="" class="form-control form-control-md" id="control_EMAIL" placeholder="Email address" aria-describedby="emailError" value="" required="">
<span id="emailError" class="error" style="display: none;"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Email address is mandatory</span>
</div>
<div class="clearfix"></div>
</div>
</form>
相关文章:
- 将jQuery转换为用户脚本的普通Javascript时遇到问题
- 在将javascript附加到我的html中时遇到问题
- 在使用javascript的Ajax方面遇到了困难
- 在我的网站上创建一个在1-10之间不断变化的数字时遇到了问题.Javascript
- 让Javascript在SharePoint 2010上运行时遇到问题
- Ruby on Rails 4:在 Rails Web 应用程序中添加 Javascript 文件时遇到问题
- 使用JavaScript获取Google地图上显示的所有推文时遇到麻烦
- 在我的Javascript和HTML之间的表单提交按钮链接中遇到问题
- 使用 php 和 javascript Ajax 发送复选框值时遇到问题
- 在 Javascript 中添加数字时遇到麻烦
- Javascript - 使用 for 时遇到问题.以循环访问对象
- 获取javascript计算字段时遇到问题
- 使用javascript从字符串中删除额外或特殊字符时遇到问题
- 遇到奇怪的javascript操作
- 我在javascript中遇到了一个回文函数的问题
- I'我在用JavaScript进行验证时遇到了一个问题
- 从javascript或JQuery执行服务器端cgi代码时遇到问题
- 在 JavaScript 中优化迭代深化尖峰小时算法时遇到问题
- 运行 Javascript 函数时遇到问题
- Javascript遇到问题.隐藏后再显示