如何完成Javascript驗證表格

我需要創建一個驗證表單，其中包含匹配密碼，沒有空白字段，只有正確字段中的字母/數字，日期（現在和之前），年齡只有數字和具有適當格式的電子郵件。我設法做電子郵件的事情，但任何人都可以幫助我完成JavaScript代碼？如何完成Javascript驗證表格

body { 
    line-height: 30px; 
} 
.error { 
    color: red; 
    font-size: 0.8em; 
    font-style: italic; 
} 
#erroremail { 
    visibility: hidden; 
} 
#errorfname { 
    visibility: hidden; 
}

$(document).ready(function() { 
    $("input[name='email']").blur(function validateForm() { 
     var x = $("input[name='email']").val(); 
     var pat = /[email protected]+\.\w\w\w/; 
     if (pat.test(x)) { 
      document.getElementById("erroremail").style.visibility = "hidden"; 
     } 
     if (!pat.test(x)) { 
      document.getElementById("erroremail").style.visibility = "visible"; 
      return false; 
     } 
    }); 
});

<form ... method="post" action="" onsubmit=""> 
    <label>Username:</label> 
    <input type="text" name="username" maxlength="16" /><br> 

    <label>First Name:</label> 
    <input type="text" name="fname" maxlength="24" /> 
    <span class="error" id="errorfname">Wrong Email Format.</span><br> 

    <label>Last Name:</label> 
    <input type="text" name="lname" maxlength="24" /><br> 

    <label>Password:</label> 
    <input type="password" name="password" maxlength="16" /><br> 

    <label>Confirm Password:</label> 
    <input type="password" name="password2" maxlength="16" /><br> 

    <label>Email:</label> 
    <input type="text" id="email" name="email" /> 
    <span class="error" id="erroremail">Wrong Email Format.</span><br> 

    <label>Age:</label> 
    <input type="text" name="age" maxlength="2" /><br> 

    <label>Date:</label> 
    <input type="date" name="date" /><br><br> 

    <input type="submit" value="Submit" onclick="return validateForm(); empty();" /> 
</form>

來源

2015-06-19 rtms

你應該[瞭解如何使用標籤元素正確（http://www.456bereastreet.com/archive/200711/use_the_label_element_to_make_your_html_forms_accessible/）。如果沒有for屬性或者表單控件，標籤就沒用了。 – Quentin

拳關你應該改變了一下週圍的JavaScript。

對於HTML中的表單元素，您應該處理關於該表單的提交事件。例如。

<form ... method="post" action="" onsubmit="validate();">

<form id="myForm"> 
$("#myForm").on('submit',function() { 
    //Handle logic example. 

    var email = $("input[name='email']").val(); 
    var regex = /\[email protected]\S+\.\S+/; 
    if(!regex.test(email)) { 
     alert("Not a valid email"); 
     return; 
    }; 

    //Rest of logic.... 
});

，你可以比較像這樣的日期。

var date = new Date($("input[name='date']").val());   
var dateNow = new Date(); // or Date.now() 
if(dateNow > date) { 
    //Do stuff 
}

來源

2015-06-19 23:38:31

如何完成Javascript驗證表格

回答

相關問題