javascript - 在上下文菜单中单击打印按钮时验证 html 表单字段

Question

我使用 phpdesktop chrome 浏览器在我的桌面应用程序中有一个 html 表单。我在验证表单字段时遇到问题，因为此表单根本没有提交按钮，因为我打算仅将此表单用于打印，因此无需在线提交任何数据或提交按钮。当用户尝试从上下文菜单打印此表单时，我希望 javascript 或 php 检查此表单，很简单!我只希望 javascript 或 php 确保在打印之前没有字段为空，并且所有字段都必须填充数据。任何帮助将不胜感激。谢谢

form.html

<form>
                <div class="field1">
                    <input class="varify-field" id="varify-field" type="text" name="fname" maxlength="80" size="14" onkeyup="updateVerifyname();"><div class="varify-name"></div>
                    <input class="walad-field" id="walad-field" type="text" name="fname" maxlength="40" size="14" onKeyup="updateWaladname();"><div class="walad-name"></div>
                </div><!-- field1 closed here -->
                <div class="field2">
                    <input class="sakan-field" type="text" name="fname" maxlength="40" size="11"><div class="sakan-name"></div>
                    <input class="tehsil-field" type="text" name="fname" maxlength="40" size="7"><div class="tehsil-name"></div>
                    <input class="zila-field" type="text" name="fname" maxlength="40" size="7" placeholder=""><div class="zila-name"></div>
                </div><!-- field2 closed here -->
                <div class="field3">
                    <input class="barmisal-field" type="text" name="fname" maxlength="40" size="11"><div class="barmisal-name"></div>
                    <input class="darja-field" type="text" name="fname" maxlength="40" size="3"><div class="darja-name"></div>
                    <div class="hai"></div>
                </div><!-- field3 closed here -->
                <div class="field4">
                    <h4 class="last-line"></h4>
                </div><!-- field4 closed here -->
                <img  class="darkhwast-dahinda-img" height="33" width="275" src="../images/darkhwast-dahinda-img.png">
                <div class="name-wrap">
                    <input class="name-field" id="name-field" type="text" name="fname" maxlength="40" size="14"><div class="name"></div><div class="name-field-no"></div>
                </div><!-- name-wrap closed here -->
                <div class="disc-maj-wrap">
                    <div class="disc-maj-name"></div>
                </div><!-- disc-maj-wrap closed here -->
                <div class="father-wrap">
                    <input class="father-field" id="father-field" type="text" name="fname" maxlength="40" size="14"><div class="father-name"></div><div class="father-field-no"></div>
                </div><!-- father-wrap closed here -->
                <div class="address-wrap">
                    <input class="address-field" type="text" name="fname" maxlength="100" size="45"><div class="address-name"></div><div class="address-field-no"></div>
                </div><!-- address-wrap closed here -->
                <div class="marital-status-wrap">
                    <input class="marital-status-field" type="text" name="fname" maxlength="40" size="9"><div class="marital-status-name"></div><div class="marital-status-field-no"></div>
                </div></br><!-- marital-status-wrap closed here -->
                <div class="wife-husband-wrap">
                    <input class="wife-husband-field" type="text" name="fname" maxlength="40" size="8"><div class="wife-husband-name"></div><div class="wife-husband-field-no"></div>
                </div><!-- wife-husband-wrap closed here -->

                <div class="occuption-wrap">
                    <input class="occuption-field" type="text" name="fname" maxlength="40" size="14"><div class="occuption-name"></div><div class="occuption-field-no"></div>
                </div><!-- occuption-wrap closed here -->
                <div class="identity-wrap">
                    <input class="identity-field" type="text" name="fname" maxlength="40" size="10"><div class="identity-name"></div><div class="identity-field-no"></div>
                </div><!-- identity-wrap closed here -->
                <div class="sign-wrap">
                    <input class="sign-field" type="text" name="fname" maxlength="40" size="13"><div class="sign-name"></div><div class="sign-field-no"></div>
                </div><!-- sign-wrap closed here -->
                <div class="birth-wrap">
                    <input class="birth-field" type="text" name="fname" maxlength="40" size="21"><div class="birth-name"></div><div class="birth-field-no"></div>
                </div><!-- birth-wrap closed here -->
                <div class="childs-name-ages-wrap">
                    <h4 class="childs-name-ages"></h4><div class="childs-name-ages-no"></div>
                </div>
                <div class="name-age">
                    <div class="nname"></div>
                    <div class="age"></div>
                </div>
                <div class="empty-name-age1-1">
                    <input class="empty-name-field-1" type="text" name="fname" maxlength="40" size="15">
                    <input class="empty-age-field-1" type="text" name="fname" maxlength="40" size="12">
                </div>
                <div class="empty-name-age1-2">
                    <input class="empty-name-field-1" type="text" name="fname" maxlength="40" size="15">
                    <input class="empty-age-field-1" type="text" name="fname" maxlength="40" size="12">
                </div>
                <div class="empty-name-age1-3">
                    <input class="empty-name-field-1" type="text" name="fname" maxlength="40" size="15">
                    <input class="empty-age-field-1" type="text" name="fname" maxlength="40" size="12">
                </div>
                <div class="empty-name-age1-4">
                    <input class="empty-name-field-1" type="text" name="fname" maxlength="40" size="15">
                    <input class="empty-age-field-1" type="text" name="fname" maxlength="40" size="12">
                </div>
                <div class="empty-name-age1-5">
                    <input class="empty-name-field-1" type="text" name="fname" maxlength="40" size="15">
                    <input class="empty-age-field-1" type="text" name="fname" maxlength="40" size="12">
                </div>
                <div class="empty-name-age1-6">
                    <input class="empty-name-field-1" type="text" name="fname" maxlength="40" size="15">
                    <input class="empty-age-field-1" type="text" name="fname" maxlength="40" size="12">
                </div>
                <table class="id-card">
                    <tr>
                        <th colspan="15"></th>
                    </tr>
                    <tr>
                        <td contenteditable='true'></td>
                        <td contenteditable='true'></td>
                        <td contenteditable='true'></td>
                        <td contenteditable='true'></td>
                        <td contenteditable='true'></td>
                        <td class="daash" contenteditable='false'>-</td>
                        <td contenteditable='true'></td>
                        <td contenteditable='true'></td>
                        <td contenteditable='true'></td>
                        <td contenteditable='true'></td>
                        <td contenteditable='true'></td>
                        <td contenteditable='true'></td>
                        <td contenteditable='true'></td>
                        <td class="daash" contenteditable='false'>-</td>
                        <td contenteditable='true'></td>
                    </tr>
                </table>
                <table id="finger-prints">
                    <tr>
                        <th colspan="15"></th>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
                <div class="disc-maj-container">
                    <div class="disc-maj-2-wrap">
                        <input class="disc-maj-2-field" type="text" name="fname" maxlength="40" size="7"><div class="disc-maj-2-name"></div>
                    </div><!-- disc-maj-2-wrap closed here -->
                    <div class="date-wrap">
                        <input class="date-field" type="text" name="fname" maxlength="40" size="25"><div class="date-name"></div>
                    </div><!-- date-wrap closed here -->
                    <div class="zila-number-wrap">
                        <input class="zila-number-field" type="text" name="fname" maxlength="40" size="26"><div class="zila-number-name"></div>
                    </div><!-- date-wrap closed here -->

                </div><!-- disc-maj-container closed here -->
                <div class="image-container" style="width:230px;height:275px;">
                    <div class="domicile-pic"></div>
                </div>
            </form>

Answer 1

实际上使用 javascript 是不可能取消打印事件的。换句话说，您不能阻止用户手动触发打印。您可以处理窗口 onbeforeprint 和 onafterprint 事件并进行验证，但您不能取消这些事件。您可以添加一些样式表，通知用户表单无效。为此，您可以使用此脚本:

function beforePrint() {
  console.info("Validation before print");
};

function afterPrint() {
  console.log("Called after print");
};

if (window.matchMedia) {
  var mediaQueryList = window.matchMedia('print');
  mediaQueryList.addListener(function(mql) {
    if (mql.matches) {
      beforePrint();
    } else {
      afterPrint();
    }
  });
}

window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;