我使用向导单击下一步按钮不检查使用正则表达式验证电子邮件。 我已经使用开关盒第一空白输入显示错误,否则进入下一步,并添加电子邮件输入值错误后不检查电子邮件这个值在Reg如何解决这个问题。如何查看电子邮件有效性?
<form>
<div class="form-main">
<div class="form-input">
<input type="text" id="fname" placeholder="First Name">
<p id="error"></p>
</div>
<div class="form-input">
<input type="text" id="lname" placeholder="Last Name">
<p id="error"></p>
</div>
<div class="form-input">
<input type="email" id="email" placeholder="Email">
<p id="error"></p>
</div>
<div class="form-input">
<input type="password" id="password" placeholder="Password">
<p id="error"></p>
</div>
<div class="form-btn">
<button type="button" id="prev" onClick="prevBtn(this);">prev</button>
<button type="button" id="next" onClick="nextBtn(this);">next</button>
<button type="submit" id="submit">submit</button>
</div>
</div>
</form>
首先是让变量的正则表达式中进行函数emailValidate
名称,在此功能中采用可变mailFormate
这回文本电子邮件。此功能用于切换情况下,如果输入值为空白,则显示错误,否则检查输入类型文本和电子邮件,但电子邮件为空白如果添加电子邮件格式时显示错误,则不检查RegEx跳过下一步如何解决此问题。
$(window).on('load',function(){
$('.form-main > .form-input:nth-child(1)').addClass('open');
$('.form-main > .form-input:not(".open")').addClass('close').hide();
});
var $div = $('.form-input');
var submits = $('#submit').css('display','none');
index = 0;
function updateStatus(a){
$div.eq(index).removeClass('current').addClass('close').hide();
index += a;
$div.eq(index).addClass('current').removeClass('close').show();
$('#next').toggle((index !==$div.length-1));
$('#prev').toggle(index !== 0);
if(index == ($div.length - 1)){
submits.toggle(index !== 0);
}else{
submits.hide();
}
}
var input = document.getElementsByTagName('input');
var error = document.getElementById('error');
var regEx = {
emailValidate : function emailValidate(email){
var mailFormate = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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,}))$/;
return mailFormate.test(email);
}
}
function validation(){
var inputValue = $('input:visible').val();
var inputType = $(input).attr('type');
if(inputValue !== ''){
switch(inputType){
case 'text' :{
updateStatus(+1);
}
case 'email' :{
var email = regEx.emailValidate(inputValue);
if(!email){
error.innerHTML = "please enter valid mail";
return false;
}else{
error.innerHTML = "valid";
updateStatus(+1);
}
break;
}
default : '';
}
}else{
$('input:visible').next().html("please enter the value");
}
}
function nextBtn(){
validation();
}
function prevBtn(){
updateStatus(-1);
error.innerHTML = '';
}
你可以在输入标签中设置模式属性吧? – Jok3r
是的,正确的mailFormate是电子邮件模式。 – Dhaval
''点击“提交”检查电子邮件验证,如果电子邮件无效 –