javascript - 编辑表中的行时添加验证

Question

目前，我有一个表格，可以在其中编辑一行并在完成编辑后保存它。我希望能够添加验证，例如如果电子邮件单元格不包含电子邮件，则它将不会保存。如果您单击“保存”并且字段尚未经过验证，我想要显示一个显示错误的对话框。我怎样才能做到这一点？

这是我需要的:

Buyer ID - numbers only
POC Name - text only
POC Email - email only
POC Phone - phone number only

相对 HTML/PHP:

<?php
    foreach ($dbh->query($sql) as $rows){
    ?>
    <tr>
        <td class="mr_id" contenteditable="false"><?php echo intval ($rows['MR_ID'])?></td>
        <td class="mr_name" contenteditable="false"><?php echo $rows['MR_Name']?></td>
        <td class="buyer_id" contenteditable="false"><?php echo $rows['Buyer_ID']?></td>
        <td class="poc_n" contenteditable="false"><?php echo $rows['MR_POC_N']?></td>     
        <td class="poc_e" contenteditable="false"><?php echo $rows['MR_POC_E']?></td>
        <td class="poc_p" contenteditable="false"><?php echo $rows['MR_POC_P']?></td>
        <td><button class="edit" name="edit">Edit</button>
        <button class="delRow" name="delete" onclick="deleteRow(this)">Delete</button></td>
    </tr>

相对 JavaScript:

$(document).ready(function() {
    $('.edit').click(function() {
        var $this = $(this);
        var tds = $this.closest('tr').find('td').not('.mr_id').filter(function() {
            return $(this).find('.edit').length === 0;
        });
        if ($this.html() === 'Edit') {
            $this.html('Save');
            tds.prop('contenteditable', true);
        } else {
            $this.html('Edit');
            tds.prop('contenteditable', false);
        }
    });
    });

Answer 1

您需要在代码中添加正则表达式，您也可以利用 HTML <input>属性以及例如:

`<input type=email>`
`<input type=tel>`

您可以找到更多相关信息HERE

可以通过对输入项进行正则表达式检查来执行其他选项/附加检查。这是GREAT WEBSITE用于计算您的正则表达式检查。

典型的 Javascript 正则表达式检查:

function telephoneCheck(str) {
    var isPhone = /^(1\s|1|)?((\(\d{3}\))|\d{3})(\-|\s)?(\d{3})(\-|\s)?(\d{4})$/.test(str);
    alert(isPhone);
}
telephoneCheck("1 555 555 5555");