Question

我希望在客户端验证表单（在提交给服务器之前）。我有一个脚本来搜索特殊字符（〜！@＃）等。如果存在至少一个，则在用户更正错误之前不应提交表单。这是我的表格：

<form  id="setUp" method="post" action="Usercontact.php">
<table id="contact">
<tbody>
<tr>
<th class="cdtl">Name of user:</td>
<td><input type="text" name='username' required /></td>
</tr>
<tr>
<th class="cdtl">Course</td>
<td><input type="text" name='useraddy1' required  /></td>
</tr>
<tr>
<th class="cdtl">Telephone</td>
<td><input type="text" name='userfone' required  /></td>
</tr>
<tr>
<th class="cdtl">e-mail Address</td>
<td><input type="email" name='schemail' required  /></td>
</tr>
</tbody>
</table>
<br>
<input id="postform" type="submit" onclick="err()" value="Submit form">
</form>

以下是脚本

<script>
function err() {
    var tbl = document.getElementById("contact");
    var name = tbl.rows[0].cells[1].getElementsByTagName("input")[0].value;
    var addy = tbl.rows[1].cells[1].getElementsByTagName("input")[0].value;
    var fone = tbl.rows[2].cells[1].getElementsByTagName("input")[0].value;
    var email = tbl.rows[3].cells[1].getElementsByTagName("input")[0].value;

    var namepos = name.lastIndexOf("~`!@#$%^&*)(+=}{][|\:;'.'/"',>?<");
    var addypos = addy.lastIndexOf("~`!@#$%^&*)(+=}{][|\:;'.'/"',>?<");
    var fonepos = fone.lastIndexOf("~`!@#$%^&*)(+=}{][|\:;'.'/"',>?<");
    var emailpos = name.lastIndexOf("~`!@#$%^&*)(+=}{][|\:;'.'/"',>?<");

    if (namepos !== -1 || addypos !== -1 || fonepos !== -1 || emailpos !== 
    -1) {
        document.getElementById("postform").addEventListener("click",  
        function(event){
        event.preventDefault()
        });
    }
}
</script>

请问为什么这个脚本无效。即使任何输入字段中有特殊字符，也会提交表单。欣赏

Answer 1

这一行：

var namepos = name.lastIndexOf("~`!@#$%^&*)(+=}{][|\:;'.'/"',>?<");

检查整个字符串（＆＃34; ~`！@＃$％^＆amp; *）（+ =} {] [|：;＆＃39;。＆＃39; /＆＃34; ＆＃39;，＆gt;？＆lt;＆＃34;），而不是每个角色。

根据评论中的建议，您可以使用HTML5模式属性：

<input name="name" pattern="[A-Za-z]{3,12}">

这将要求名称仅包含字母和范围，长度为3到12个字符。

要使用正则表达式测试列出的所有字符，可以使用：

var re=/[~`!@#$%^&*)(+=}{\]\[|\:;'.'\"',>?<]/
var str="this@that";

if (re.test(str)) {
    console.log('The string has one of the characters');
} else {
    console.log('The string does not have any of the characters');
}

Answer 2

您需要包含活动。 PreventDefault（）..如果您找到要检查的字符或您可能要检查的任何其他内容，这将阻止表单提交。

Answer 3

根据以上建议，我现在有一份工作文件如下：

<form  id="setUp" method="post" action="Usercontact.php">
<table id="contact">
<tbody>
<tr>
<th class="cdtl">Name of user:</td>
<td><input type="text" name='username' required pattern="[A-Za-z0-9.-_]
{5,12}"/></td>
</tr>
<tr>
<th class="cdtl">Course</td>
<td><input type="text" name='useraddy1' required pattern="[A-Za-z0-9]{5,15}" 
/></td>
</tr>
<tr>
<th class="cdtl">Telephone</td>
<td><input type="text" name='userfone' required pattern="[0-9.-_]{6,15}" />     
</td>
</tr>
<tr>
<th class="cdtl">e-mail Address</td>
<td><input type="email" name='schemail' required pattern="[A-Za-z0-9.-_@]" 
/></td>
</tr>
</tbody>
</table>
<br>
<input id='submit' type="submit" value="Submit form">
</form>

脚本已删除，因为不需要它。

在客户端验证表单

3 个答案: