0
私は次のボタンをクリックしてウィザードを作成しません。正規表現を使用して電子メールを検証しません。 エラーを表示するためにスイッチの最初の空白入力を使用しています。それ以外の場合は次のステップに進み、この値を電子メールでチェックしないでください。電子メールの有効性をチェックするにはどうすればよいですか？
<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 = /^(([^<>()\[\]\\.,;:\[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
はいright mailFormateはメールパターンです。 – Dhaval
''電子メールが有効でない場合、 "submit"のクリックで電子メールの検証をチェックし、対応するエラーを表示します –