Question

我对JavaScript很新，我一直在网上使用教程，但他们似乎经常使用php验证并使用JavaScript进行警告，我正在使用xhr的应用程序将数据发布到服务器，但之前我想让JavaScript完成一些验证。然后我将用PHP验证。

这是表单代码

<form id="booking" action="">
                <span class="red">*</span>First Name:
                <input type="text" name="firstName" id="firstName">
                <br>

                <span class="red">*</span>Last Name:
                <input type="text" name="lastName" id="lastName">
                <br>

                <span class="red">*</span>Contact Number:
                <input type="text" name="number" id="number">
                <br>

                Unit Number(optional):
                <input type="text" name="unit" id="unit">
                <br>

                <span class="red">*</span>Street Number:
                <input type="text" name="streetNumber" id="streetNumber">
                <br>

                <span class="red">*</span>Street Name:
                <input type="text" name="streetName" id="streetName">
                <br>

                <span class="red">*</span>Suburb:
                <input type="text" name="pickupSuburb" id="pickupSuburb">
                <br>

                Destination Suburb<span class="red">*</span>:
                <input type="text" name="destinationSuburb" id="destinationSuburb">
                <br>
                Pick-Up Date and Time<span class="red">*</span>:
                <input type="datetime-local" name="dateTime" id="dateTime">
                <br>

                <br>
                <input type="button" value="Submit"
                       onclick="getData('bookingprocess.php','message', firstName.value, lastName.value, number.value, unit.value, streetNumber.value, streetName.value, pickupSuburb.value, destinationSuburb.value, dateTime.value)"/>
                <input type="reset" value="Reset">

            </form>

 <div id="message">
            </div>

我为警告信息创建了一个div。

这是JavaScript

// file simpleajax.js
var xhr = createRequest();
function getData(dataSource, divID, firstName, lastName, number, unit, streetNumber, streetName, pickupSuburb, destinationSuburb, dateTime)  {
    if(xhr) {
        var place = document.getElementById(divID);
        var requestbody = "firstName="+encodeURIComponent(firstName)+"&lastName="+encodeURIComponent(lastName)+"&number="+encodeURIComponent(number)+"&unit="+encodeURIComponent(unit)+"&streetNumber="+encodeURIComponent(streetNumber)+"&streetName="+encodeURIComponent(streetName)+"&pickupSuburb="+encodeURIComponent(pickupSuburb)+"&destinationSuburb="+encodeURIComponent(destinationSuburb)+"&dateTime="+encodeURIComponent(dateTime);
        xhr.open("POST", dataSource, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
            place.innerHTML = xhr.responseText;
            } // end if
        } // end anonymous call-back function
        xhr.send(requestbody);
    } // end if
} // end function getData()

function checkForm(booking) {

    var valid = true;

    if(firstName.value.length <= 0) {
        window.alert("Name is empty");
        booking.firstName.focus();
        return valid = false;
    }
}

请注意会有更多验证，我的问题是我如何从表单中调用验证，或直接从XHR调用，这是最佳做法？我理解从表单中调用XHR可能被认为是不好的做法，而且我已经对所有值进行了硬编码？

让这个工作变得非常麻烦，如果它有点像霍奇，那就道歉了。

Answer 1

填写表单时验证（当光标离开字段时）更有意义，因为您可以向用户添加一些提示。例如，如果用户输入了一封电子邮件，您会检查它是否包含@，而且它不会更加用户友好，通知他们他们的电子邮件出现了问题输入（相反，他们可以发送表单，然后验证它并告诉他们表单不正常，但是他们必须再次填写表单，这有点令人沮丧）。

尝试

<input type="text" onblur="alert('out!');" />

当输入失去焦点时会触发。现在，您可能想知道如何使用此类处理中其他地方定义的函数。例如，可以这样做：

<强> JS：

window.myHandler = function(input,event) { ... };

<强> HTML：

<input type="text" onblur="window.myHandler(input,event);" />

请注意，在HTML onblur中，属性event是一个＆＃34;预先定义的＆＃34;包含Event对象＆＃34; instance＆＃34;的变量，但对于IE的旧版本，你应该使用

window.myHandler = function(input,event) {
    event = event || window.event; // elder IE store the Event object in window.event
    // input is your DOM element. You can use input.value to get the value
    // or this.classList to add some class which indicates (via CSS) that the input is wrong
    ... 
};

使用XHR使用JavaScript进行表单验证

1 个答案: