Heim > Web-Frontend > Layui-Tutorial > Layui ermittelt, ob das Formular leer ist

Layui ermittelt, ob das Formular leer ist

Freigeben: 2019-07-31 08:59:28
Original
6334 Leute haben es durchsucht

Layui ermittelt, ob das Formular leer ist

Das Formular darf nicht leer sein, um eine Erinnerung einzureichen:

Wenn Sie an einem Administratorsystem arbeiten, Ein Problem mit dem Backend besteht darin, dass die im Frontend-Formular übermittelten Daten keine leeren Felder enthalten dürfen. Die damalige Lösung bestand darin, natives js zu verwenden, um das DOM zu betreiben und Beurteilungs- und Popup-Operationen durchzuführen. Nach

habe ich beim Durchsuchen der Community festgestellt, dass das Formular ein Ereignis hat. Dieses Ereignis kann so verstanden werden, dass es unmittelbar vor dem Absenden des Formulars ausgelöst wird Rufen Sie dieses Ereignis auf und geben Sie in der Rückruffunktion den Bestätigungscode ein, um festzustellen, ob ein leeres Formular vorhanden ist, sowie den Erinnerungscode.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src = "checkNull.js"></script>
</head>
<body>
//表单在进行提交的前一刻会调用onsubmit事件,这个事件会接受checkInput这个函数的返回值。
    <form action="" onsubmit = "return checkInput(this)">
        <input type="text" placeholder="请输入用户名">
        <input type="text" placeholder="请输入密码">
        <input type="submit">
    </form>
    
</body>
</html>
<script>
    function checkInput(form) {
    for (let i = 0; i < form.length; i++) {
        alert("进来了");
        if (form.elements[i].value == "") {
            alert("请您输入" + form.elements[i].placeholder);
            form.elements.onfocus();
            //这里返回一个Boolean值,从而确定表单是否能够提交
            return false;
        }
    }
}
</script>
Nach dem Login kopieren

Empfohlen: Layui-Framework-Tutorial

Das obige ist der detaillierte Inhalt vonLayui ermittelt, ob das Formular leer ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage