ฉันจะฟังแบบฟอร์มส่งเหตุการณ์ในจาวาสคริปต์ได้อย่างไร

ฉันต้องการเขียนไลบรารี javascript ตรวจสอบความถูกต้องของฟอร์มของตัวเองและฉันกำลังค้นหาวิธีตรวจสอบว่ามีการคลิกปุ่มส่งใน Google แต่ทั้งหมดที่ฉันพบคือรหัสที่คุณต้องใช้ onClick on onSubmit="function()"ใน html

ฉันต้องการสร้างจาวาสคริปต์นี้เพื่อที่ฉันจะได้ไม่ต้องสัมผัสโค้ด html ใด ๆ เช่นการเพิ่ม onSubmit หรือ onClick javascript

ทำไมคนถึงใช้ jQuery อยู่เสมอเมื่อไม่จำเป็น?
ทำไมผู้คนถึงใช้ JavaScript ธรรมดา ๆ ไม่ได้?

var ele = /*Your Form Element*/;
if(ele.addEventListener){
    ele.addEventListener("submit", callback, false);  //Modern browsers
}else if(ele.attachEvent){
    ele.attachEvent('onsubmit', callback);            //Old IE
}

callback เป็นฟังก์ชันที่คุณต้องการเรียกใช้เมื่อมีการส่งแบบฟอร์ม

เกี่ยวกับEventTarget.addEventListenerตรวจสอบเอกสารเกี่ยวกับเรื่องนี้ MDN

หากต้องการยกเลิกsubmitเหตุการณ์ดั้งเดิม(ป้องกันไม่ให้ส่งแบบฟอร์ม) ให้ใช้.preventDefault()ในฟังก์ชันเรียกกลับของคุณ

document.querySelector("#myForm").addEventListener("submit", function(e){
    if(!isValid){
        e.preventDefault();    //stop form from submitting
    }
});

ฟังsubmitเหตุการณ์ด้วยห้องสมุด

หากคุณตัดสินใจว่าจำเป็นต้องใช้ห้องสมุดด้วยเหตุผลบางประการ (คุณใช้ไลบรารีอยู่แล้วหรือไม่ต้องการจัดการกับปัญหาข้ามเบราว์เซอร์) รายการวิธีรับฟังเหตุการณ์ส่งในไลบรารีทั่วไป

1. jQuery

   $(ele).submit(callback);

   eleการอ้างอิงองค์ประกอบของฟอร์มอยู่ที่ไหนและcallbackเป็นการอ้างอิงฟังก์ชันการเรียกกลับ การอ้างอิง

    <iframe width="100%" height="100%" src="http://jsfiddle.net/DerekL/wnbo1hq0/show" frameborder="0"></iframe>

2. AngularJS (1.x)

   <form ng-submit="callback()">
   
   $scope.callback = function(){ /*...*/ };

   ตรงไปตรงมามาก$scopeขอบเขตที่กำหนดโดยกรอบงานภายในคอนโทรลเลอร์ของคุณอยู่ที่ไหน การอ้างอิง

3. เกิดปฏิกิริยา

   <form onSubmit={this.handleSubmit}>
   
   class YourComponent extends Component {
       // stuff
   
       handleSubmit(event) {
           // do whatever you need here
   
           // if you need to stop the submit event and 
           // perform/dispatch your own actions
           event.preventDefault();
       }
   
       // more stuff
   }

   เพียงแค่ส่งตัวจัดการไปที่onSubmitเสา การอ้างอิง

4. เฟรมเวิร์ก / ไลบรารีอื่น ๆ

   อ้างถึงเอกสารของกรอบงานของคุณ

การตรวจสอบ

คุณสามารถตรวจสอบความถูกต้องของคุณใน JavaScript ได้ตลอดเวลา แต่ด้วย HTML5 เรายังมีการตรวจสอบความถูกต้องดั้งเดิม

<!-- Must be a 5 digit number -->
<input type="number" required pattern="\d{5}">

คุณไม่จำเป็นต้องใช้ JavaScript! เมื่อใดก็ตามที่ไม่รองรับการตรวจสอบความถูกต้องแบบเนทีฟคุณสามารถเปลี่ยนกลับไปใช้โปรแกรมตรวจสอบ JavaScript ได้

การสาธิต: http://jsfiddle.net/DerekL/L23wmo1L/

นี่เป็นวิธีที่ง่ายที่สุดที่คุณสามารถเรียกใช้ฟังก์ชันจาวาสคริปต์ของคุณเองได้เมื่อonSubmitเกิดเหตุการณ์

HTML

<form>
    <input type="text" name="name">
    <input type="submit" name="submit">
</form>

JavaScript

window.onload = function() {
    var form = document.querySelector("form");
    form.onsubmit = submitted.bind(form);
}

function submitted(event) {
    event.preventDefault();
}

ตามความต้องการของคุณคุณสามารถทำสิ่งต่อไปนี้ได้โดยไม่ต้องใช้ไลบรารีเช่น jQuery:

เพิ่มสิ่งนี้ลงในหัวของคุณ:

window.onload = function () {
    document.getElementById("frmSubmit").onsubmit = function onSubmit(form) {
        var isValid = true;
        //validate your elems here
        isValid = false;

        if (!isValid) {
            alert("Please check your fields!");
            return false;
        }
        else {
            //you are good to go
            return true;
        }
    }
}

และแบบฟอร์มของคุณอาจมีลักษณะดังนี้:

    <form id="frmSubmit" action="/Submit">
        <input type="submit" value="Submit" />
    </form>

ด้วย jQuery:

$('form').submit(function () {
    // Validate here

    if (pass)
        return true;
    else
        return false;
});