【发布时间】：2017-08-10 15:04:04
【问题描述】：
我在单击下一步按钮时制作向导，而不是使用正则表达式检查验证电子邮件。 我已经使用 switch case 第一个空白输入来显示错误，否则转到下一步，在添加电子邮件输入值错误后不检查电子邮件这个值在 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 此返回文本电子邮件。此功能用于切换大小写，如果显示错误，则将条件输入值设为空白，否则检查输入类型文本和电子邮件，但如果添加电子邮件格式错误时显示错误，则电子邮件为空白，不检查正则表达式跳过下一步如何解决此问题.
$(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 = /^(([^<>()\[\]\\.,;:\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,}))$/;
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 = '';
}
【问题讨论】：
-
可以在输入标签中设置pattern属性对吗？
-
是的，mailFormate 是电子邮件模式。
-
<input type="email">在点击“提交”时检查电子邮件验证，如果电子邮件无效，将显示相应的错误
标签： javascript jquery validation