HTML表单的javascript验证

Question

有人帮我在 javacript 验证下面的表单，它应该检查 fname 和 lname 中不应该有数字/数字， stnumber 应该有特定的大小（大小） 状态和密码应该匹配 javascript验证有可能吗？？？？

<form id="user" method="post" action="" onsubmit="return validateForm()">
 <span>First Name:</span>                       
    <input type="text" class="input" id="fname" name="fname" required>
  <span>Last Name</span>
<input type="text" class="input" id="lname" name="lname" required>
  <span>Student Number</span>
<input type="text" class="input" id="stn" name="stn" required>
 <span>Student address</span>
<input type="text" class="input" id="stad" name="stad" required>
 <span>Town/suburb</span>
<input type="text" class="input" id="town" name="town" required>
 <span>State</span>
<select name="state" id="state">
<option selected>--select--</option>
<option>AAA</option>
<option>BBB</option>
    </select>                               
<span>Postal Code</span>
<input type="text" class="input" id="pcode" name="pcode" required>

Answer 1

我真的不明白这个问题，但是如果您希望用户输入“特定”尺寸，为什么不直接使用

maxlength="size"

财产？

编辑： Javascript部分

  function isCharKey(evt){
       var charCode = (evt.which) ? evt.which : event.keyCode
       return !(charCode < 31 && (charCode > 48 || charCode < 57));
 }
 var state= document.getElementById("state").value;
 var pcode= document.getElementById("pcode").value;
if (state != pcode) {
    alert("State and Pcode doesn't match");
}

在你的 html 中

 <input type="text" class="input" id="fname" name="fname" required onkeypress="return isCharKey(event);">
 <input type="text" class="input" id="lname" name="lname" required onkeypress="return isCharKey(event);">
 <input type="text" class="input" id="stn" name="stn" required maxlength="10">

应该只输入字符而不是数字

编辑2：

<script type="text/javascript">
function isCharKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    return !(charCode < 31 && (charCode > 48 || charCode < 57));
}
function validateForm() {
    var state= document.getElementById("state").value;
    var pcode= document.getElementById("pcode").value;
    if (state != pcode) {
        alert("State and Pcode doesn't match");
    }   
}</script>

在页面底部写下这个

Answer 2

如果您的项目允许，您可以使用特定的 HTML5 属性（例如 required、min、max 和 pattern）进行 HTML5 验证。查看W3Schools.com和html5pattern.com的更多信息

如果需要 Javascript，则有大量验证库可供选择，例如 jQuery Validate 或 Parsley，它们完全能够完成您想要实现的目标。