验证与Java脚本和打印

Validation With Java Script and printing

本文关键字：打印 脚本 Java 验证      更新时间：2023-09-26

我有一个HTML表单，如果字段为空，Javascript将在字段内打印错误。请有人给我一段代码，将验证表单，然后将打印错误在表单的顶部，如果它的左空白，而不是表单的字段内?

我的形式:

<form id="contact" onsubmit="checkContactForm(); return false;" onreset="resetForm();">
<p>Fill in the form below to send me a message!</p>    
<div id="errormessage"></div>
<p>
<label for="">  </label>
<input type="text" name="" id="" onfocus="" />
<p>
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" onfocus="resetField(this);" />
</p>
<p>
  <label for="email">E-mail address:</label>
  <input type="text" name="email" id="email" onfocus="resetField(this);" />
</p>
<p>
  <label for="message">Your Message:</label>
  <textarea name="message" id="message" rows="5" cols="25" onfocus="resetField(this);"></textarea>
</p>
<p>
  <button type="submit">Send Message</button>
  <button type="reset">Reset Form</button>
</p>

我的Javascript: 

var requiredFields = ["name", "email", "message"];
function checkContactForm() {
    var myForm = document.forms[0];
    for (i in requiredFields) {
        fieldName = requiredFields[i];
        if (!myForm[fieldName].value || myForm[fieldName].value == "Error") {
            myForm[fieldName].style.color = "#f66";
            myForm[fieldName].value = "";
            var emptyFields = true;
        }
    }
    if (!emptyFields) { myForm.submit(); }
}
function resetField(myField) {
    if (myField.value == "Error") {
        myField.style.color = "#000";
        myField.value = "";
    }
}
function resetForm(myForm) {
    var myForm = document.forms[0];
    for (i in requiredFields) {
        fieldName = requiredFields[i];
        myForm[fieldName].style.color = "#000";
    }
}

由于HTML5有一个表单验证API (http://www.w3schools.com/js/js_form_validation.asp)

在这里你可以找到一个很好的"教程":http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/

如果我明白你想要的错误将打印在#errormessagediv，对吗?如果是这样，您可以简单地执行如下操作:

function addError(str){
    document.getElementById("errormessage").innnerHTML = document.getElementById("errormessage").innerHTML + str + "<br>";
}
function checkContactForm() {
    var myForm = document.forms[0];
    for (i in requiredFields) {
        fieldName = requiredFields[i];
        if (!myForm[fieldName].value || myForm[fieldName].value == "Error") {
            myForm[fieldName].style.color = "#f66";
            myForm[fieldName].value = "";
            var emptyFields = true;
            addError(fiedlName+" is empty!");
        }
    }
    if (!emptyFields) { myForm.submit(); }
}
相关文章：