表单验证香草JS

问题描述 投票：2回答：3

我建立一个多页的形式，我有一些不寻常的验证要求。这是我想要做的/是我迄今所做的一切。

我想做的事：

（1）由于每个表单字段填写，我想一个函数来运行，并检查用户输入已满足某些条件 - 即对于姓氏和名字，有没有号码，有一个空间，在之间名。

（2）一旦每个领域都充满并作为真正的过去了，我想另一个函数运行重新启用以前禁用“下一步”按钮，将用户移动到表单的下一个页面。

我做了什么

（1）创建的形式的迷你版具有两个输入：

  1. 一，需要一个名字，空格和姓氏
  2. 即需要一个电话号码设置以下方式XXX XXX XXX

（2）我console.logged与通的结果/失败逻辑，所以我知道当某些事情正在由用户输入，该代码被适当地验证。

我在哪里卡住：

我不知道如何创建辅助代码，将重新启用以前禁用“下一步”按钮，将窗体移动到下一个页面。

我想这样做的是让它所以当“下一步”按钮将重新启用，并点击，它自己onclick函数隐藏当前页面，在序列中查找下一个页面，并改变其display:block，我相信我有代码制定了单独的，但我不知道如何将它与我的其他需要整合。

function checkForm()
{
	var firstName = document.getElementById("name").value;
	
	var phone = document.getElementById("phone").value;
	

	
	function checkFirstName()
	{
		if(firstName == "" || !isNaN(firstName) || !firstName.match(/^[A-Za-z]*\s{1}[A-Za-z]*$/))
	{
		console.log("Put a first Name and Last Name");
	}
	else
	{
		console.log("Thank You");
	}

	};
	
	checkFirstName();
	
	function checkPhoneNumber()
	{
		if(!phone.match(/^[0-9]*\s{1}[0-9]*\s{1}[0-9]*$/))
			 {
			 console.log("Please Put in a proper phone number");
			 }
	else
	{
		console.log("Thank you");
		cansubmit = true;
	}
	};
	checkPhoneNumber();
	
};


	
<form>
First Name: <input type="text" id="name" onblur="checkForm()" /><label id="nameErrorPrompt"></label>
	<br />

	Phone Number: <input type="text" id="phone" onblur="checkForm()" /><label></label>
	<br />
	
	<button id="myButton" disabled="disabled">Test Me</button>
</form>
javascript html forms validation
3个回答
2
投票

请参见下面的代码。

它可能会更方便用户的使用KEYUP而非的onblur，因为大多数用户我知道会尝试单击禁用的按钮，而不是压片或聚焦在另一元件上。

function checkForm() {
  var firstName = document.getElementById("name").value;

  var phone = document.getElementById("phone").value;

  var phoneCanSubmit, nameCanSubmit = false;

  function checkFirstName() {
    if (firstName == "" || !isNaN(firstName) || !firstName.match(/^[A-Za-z]*\s{1}[A-Za-z]*$/)) {
      nameCanSubmit = false;
      console.log("Put a first Name and Last Name");
    } else {
      nameCanSubmit = true;
      console.log("Thank You");
    }

  };

  checkFirstName();

  function checkPhoneNumber() {
    if (!phone.match(/^[0-9]*\s{1}[0-9]*\s{1}[0-9]*$/)) {
      phoneCanSubmit = false;
      console.log("Please Put in a proper phone number");
    } else {
      phoneCanSubmit = true;
      console.log("Thank you");
      cansubmit = true;
    }
  };
  checkPhoneNumber();
  if (nameCanSubmit && phoneCanSubmit) {
    document.getElementById("myButton").disabled = false;
  } else {
    document.getElementById("myButton").disabled = true;
  }
};
<form>
  First Name:
  <input type="text" id="name" onblur="checkForm()" />
  <label id="nameErrorPrompt"></label>
  <br />Phone Number:
  <input type="text" id="phone" onblur="checkForm()" />
  <label></label>
  <br />

  <button id="myButton" disabled="disabled">Test Me</button>
</form>
1
投票

下面的代码给你想要的东西。我删除了一些无关的检查，以简化代码和还迁事件处理程序从他的HTML JavaScript的。我还拉了现场检查出更大的checkForm功能。这使您可以使用它们一个在时刻如果需要的灵活性。

window.addEventListener('load', function(e) {
    var nameInput = document.getElementById('name');
    var phoneInput = document.getElementById('phone');
    var myButton = document.getElementById('myButton');

     myButton.addEventListener('click', function(e) {
        e.preventDefault(); //Stop the page from refreshing
         getNextPage('Next page shown!!');
    }, false);

    nameInput.addEventListener('blur', function(e) {
        checkName(this.value);
    }, false);

    phoneInput.addEventListener('blur', function(e) {
        //Uncomment below to make this responsible only for checking the phone input
        //checkPhoneNumber(this.value);
        /*You could do away with diasbling and check the form 
        on submit, but if you want to keep the disable logic
        check the whole form on the blur of the last item*/
        checkForm();
    }, false);
}, false);

function getNextPage(foo) {
    console.log('Callback fired: ', foo);
    //Do something here
}

function checkPhoneNumber(phone) {
    if(!phone.match(/^[0-9]*\s{1}[0-9]*\s{1}[0-9]*$/)) {
         console.log("Please Put in a proper phone number");
        return 0;
    }
    else {
        console.log("Thank you name entered");
        return 1;
    }
};

//Removed a bit of over coding, no ned to check isNaN or empty string since using regex already
function checkName(firstAndLastName) {
    if(!firstAndLastName.match(/^[A-Za-z]*\s{1}[A-Za-z]*$/)) {
        console.log("Put a first Name and Last Name");
        return 0;
    }
    else {
        console.log("Thank You phone entered");
        return 1;
    }

};

function checkForm() {
    var validCount = 0;
    fieldCount = document.forms[0].elements.length - 1; //substract one for the submitbutton!
    var phoneNum = document.getElementById('phone').value;
    var name = document.getElementById('name').value;
    var myButton = document.getElementById('myButton');

    validCount += checkPhoneNumber(phoneNum);
    validCount += checkName(name);
    console.log(validCount + ' of ' + fieldCount + ' fields are valid');
    if (validCount > 0 && validCount === fieldCount) {//Compare the inputs to the number of valid inputs 
        myButton.disabled = false;
    }
    else {
        myButton.disabled = true;
    }
}

HTML

<form>
    First Name: <input type="text" id="name" /><label id="nameErrorPrompt"></label>
    <br />
    Phone Number: <input type="text" id="phone" /><label></label>
    <br />

    <button id="myButton" disabled="disabled">Test Me</button>
</form>
0
投票

你怎么样通过使每个输入的onblur开始返回boolean值，指示字段是合法的。

然后在checkForm功能设置cansubmit变量（=检查名&& checkPhone）后，才继续前进 - 那么你就不需要启用和禁用按钮。

如果你真的想要的按钮，使您可以使用相同的模式，但这样做

document.getElementById("myButton").disabled = !canSubmit;

你会一直想打电话给checkForm现场模糊喜欢你现在的样子。

还要注意你是不是作用域canSubmit当地现在。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.