0

我已经尝试了 javascript 中的所有内容以获取提交按钮以在警报中显示所有输入字段。

例子。当用户填写表单时，它会进行验证，然后单击提交以在警报中显示结果，例如姓名、费用、地址和电话等。我正在尝试练习 javascript，但无法获得我想要的结果。

有人可以帮忙吗！

这是我的脚本。

<script type="text/javascript">     
// Form validation code will come here.     
var Num1 = document.getElementById('1stTotal').value;
var Num2 = document.getElementById('2ndTotal').value;
var Num3 = document.getElementById('3rdTotal').value;
var Total = Num1 + Num2 + Num3;
grandTotal.value = Total;
function validate() {
    if (document.myForm.Name.value == "") {
        alert("Please provide your name!");
        document.myForm.Name.value.focus();
        return false;
    }
    if (document.myForm.Street.value == "") {
        alert("Please provide your Street!");
        document.myForm.Street.value.focus();
        return false;
    }
    if (document.myForm.City.value == "") {
        alert("Please provide your City!");
        document.myForm.City.focus();
        return false;
    }
    if (document.myForm.Postal.value == "" || isNaN(document.myForm.Postal.value) || document.myForm.Postal.value.length != 7) {
        alert("Please provide a Postal in the format xxx-xxx.");
        document.myForm.Postal.focus();
        return false;
    }
    if (document.myForm.Telephone.value == "" || isNaN(document.myForm.Telephone.value) || document.myForm.Telephone.value.length != 12) {
        alert("Please provide a Telephone in the format xxx-xxx-xxxx.");
        document.myForm.Telephone.focus();
        return false;
    }
    var emailID = document.myForm.Email.value;
    atpos = emailID.indexOf("@");
    dotpos = emailID.lastIndexOf(".");
    if (atpos < 1 || (dotpos - atpos < 2)) {
        alert("Please provide a valid email.");
        document.myForm.Email.focus();
        return false;
    }
    if (document.myForm.CardNo.value == "" || isNaN(document.myForm.CardNo.value) || document.myForm.CardNo.value.length != 16) {
        alert("Please provide a Credit Card Number in the format 1234567890123456.");
        document.myForm.CardNo.focus();
        return false;
    }
    if (document.myForm.Expiry.value == "" || isNaN(document.myForm.Expiry.value) || document.myForm.Expiry.value.length != 10) {
        alert("Please provide a Expiry in the format MM-DD-YYYY.");
        document.myForm.Expiry.focus();
        return false;
    }
    return (true);
}
function greeting() {
    alert("Hello " + Name + "," + "<br />" + "Your book order includes:");
} < /script>
4

3 回答 3

0

请不要一个接一个地触发警报。很烦人的用户界面。也不要在每次无效输入后返回。一次性完成。

相反，为每个无效输入构建一串消息。从一个空字符串开始。最后，如果字符串有长度，提醒它。否则，你是有效的。

所以第一部分可能如下所示：

var str = "";
function validate() {
if (document.myForm.Name.value == "") {
    str += "Please provide your name!\n"; // use a newline in alerts
}
// etc.
//
if (str.length > 0) {
    alert(str);
}
// but there are better ways than alert, too.
于 2013-07-31T21:21:13.670 回答
0

如果您使用核心原生 javascript，您可能会遇到与浏览器不同的解释/渲染/兼容性相关的问题。

我强烈建议您使用像mootools或jQuery这样的 js 框架。

然后，您将能够真正轻松地选择表单元素并正确验证表单。

当然，你需要先学习一点选择的框架，但要确保你会很高兴:)

编辑：另外，请记住，任何引用任何 html 元素的代码都必须在创建元素后调用。换句话说，您应该将函数调用包装在 onload 或 ondomready 事件中。

于 2013-07-31T21:16:53.360 回答
0

我已经能够使用“onmouseover”轻松地调用该函数以及您想要的所有“else if”语句。警报将一次一个地处理每个必需的输入字段，而不是一个接一个地发出一系列警报。

function subCheck() {
		if (document.myForm.Contact.value === "") {
			alert("Contact Name Required");
			document.myForm.Contact.focus();
		}
		else if (document.myForm.Email.value === "") {
			alert("Contact Email Required");
			document.myForm.Email.focus();
		}
	}
<form name="myForm">
Contact Name: <input type="text" name="Contact"><br /><br />
Contact Email: <input type="text" name="Email"><br /><br />
<input type="submit" name="submit" class="button" value="SUBMIT" onmouseover="subCheck()"></form>

于 2017-03-06T19:43:53.057 回答