在表中编辑行时添加验证

时间:2016-09-30 15:37:46

标签: javascript php jquery html validation

目前,我有一个表格,我可以编辑一行并在完成编辑后保存。我希望能够添加验证,例如,如果电子邮件单元格不包含电子邮件,那么它将无法保存。如果您单击“保存”并且字段尚未经过验证,我希望显示一个显示错误的对话框。我怎么能这样做?

这就是我需要的:

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);
        }
    });
    });

1 个答案:

答案 0 :(得分:0)

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

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

您可以找到有关HERE

的更多信息

可以通过在输入项目上包含RegEx检查来执行其他选项/附加检查。这是一个GREAT WEBSITE,用于计算您的RegEx支票。

典型的Javascript RegEx检查:

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");