Javascript 在客户端验证表单

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

<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>

函数err（）{
var tbl=document.getElementById（“联系人”）；
var name=tbl.rows[0]。单元格[1]。getElementsByTagName（“输入”）[0]。值；
var addy=tbl.rows[1]。单元格[1]。getElementsByTagName（“输入”）[0]。值；
var fone=tbl.rows[2]。单元格[1]。getElementsByTagName（“输入”）[0]。值；
var email=tbl.rows[3]。单元格[1]。getElementsByTagName（“输入”）[0]。值；
var namepos=name.lastIndexOf（“~`！@$%^&*）（+=}{][\124;\：；'./”，>？此行：

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

var namepos=name.lastIndexOf（“~`！@$%^&*）（+=}{][\\：；'./”，>？您需要包括event.PreventDefault（）…如果您找到要检查的字符或任何其他可能要检查的内容，这将阻止表单提交。
根据上面的建议，我现在有一个工作文档，如下所示：

<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>


用户姓名：
课程
电话
电子邮件地址



脚本已被删除，因为不需要它。
脱离主题，但因为您使用的是相同的
indexOf（）
多次使用同一个正则表达式调用，你真的应该把它变成一个函数，而不是自己重复。记住：keep.use
onsubmit
而不是
onclick
你有没有考虑过在HTML 5中使用pattern属性-不支持buy Safari，但也需要考虑一下-tbl.rows[0].cells[1].getElementsByTagName-我会更改代码以按ID而不是表行位置获取元素。否则，每次将新行添加到HTML表或设计器更改页面时，都需要更改JS代码layout@David托马斯：你是对的。别忘了你的建议。即使你不想使用模式方法，最好还是说明什么是模式方法您想要接受的字符，而不是您想要拒绝的字符。@user2182349和Jacque Goupil txs供您输入。我已将您的字符与上面的其他字符一起应用，现在有了一个工作文档。我已在新文档下面复制。
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');
}

<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>