Html表單無法使用JavaScript驗證輸入
[英]Html Form Unable to Validate Inputs using JavaScript
問題描述
我正在創建一個應用程序。 HTML文件如下所示：
<!DOCTYPE html>
<html>
<body style="background-color: #ccc">
<script type="javascript">
function validateform(){
alert("Hello");
var firstnameErr="";
var valid = true;
var name = document.myform.fname.value;
var types = /^[a-zA-Z]+$/;
if (fname==null || fname=="") {
firstnameErr = "required";
valid = false;
} else if (!fname.value.match(types)) {
firstnameErr = "format error";
valid = false;
}
return valid;
}
</script>
<form name="myform" method="post" onsubmit="return validateform()" action="/Project/ViewList.php">
Firstname : <input type="text" name="fname" placeholder="First name" maxlength="20">
<span class="error">*
<script type="javascript">
document.write(firstnameErr);
</script>
</span>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
當我點擊提交按鈕時，它會立即重定向到“ViewList.php”而不會運行validatefom（）。 我添加了alert（）以檢查函數是否正在執行。 我希望我的表單只在滿足驗證要求時才提交，而不是在有效時為false。
4 個解決方案
解決方案1
1 2017-07-11 19:06:36
除了Typo錯誤，我發現的主要問題是你的腳本沒有執行，你的validateform()方法不可用。 這是因為您的腳本標記type屬性不正確 <script type="javascript">
要使其工作，您需要將其更改為此 <script type="text/javascript">
請更改您的驗證方法validateform()因為它也可能錯誤。
解決方案2
1 2017-07-11 20:08:00
代碼有什么問題，OP正在使用HTML5表單來驗證傳統方式。 在HTML5之前，您必須使用JavaScript進行前端驗證; 現在，事情也變得更加簡單和容易。 當然，OP會將以下示例中的操作值替換為所需的URL。
注意：OP的代碼中存在錯誤，但如果您刪除了JavaScript並編寫了HTML代碼，請確保將以下內容添加到文本輸入中：
required pattern="[a-zA-Z]+"
然后表格驗證。 換句話說，當您使用HTML5進行表單驗證時，您不必非常努力地工作:)
<form id="myform" name="myform" method="POST" action="https://www.example.com"> <label for="fname">Firstname</label>: <input name="fname" placeholder="First name" maxlength="20" required pattern="[a-zA-Z]+"> <input type="submit" name="submit" value="Submit"> </form>
對於那些喜歡以老式方式做事的人，請參閱OP的代碼修訂版 。 注意：它使用最少的變量，使用快捷方式來減少冗長，並使用函數進行組織。 而且，它對用戶的手也很友善。
解決方案3
1 2017-07-11 20:33:09
你完成的方式將永遠無法使用document.write輸出任何東西，使用它，為我工作：
<!DOCTYPE html>
<script>
function validateform(){
alert("Hello");
var valid = true;
var fname = document.myform.fname.value;
var types = /^[a-zA-Z]+$/;
if (fname==null || fname=="") {
firstnameErr = 'required';
valid = false;
} else if (!fname.match(types)) {
firstnameErr = 'format error';
valid = false;
}
document.getElementById('msg').innerHTML = firstnameErr;
return valid;
}
</script>
<form name="myform" method="post" onsubmit="return validateform()" action="/Project/ViewList.php">
Firstname : <input type="text" name="fname" placeholder="First name" maxlength="20">
<span class="error">* <label id='msg'></label> </span>
<input type="submit" name="submit" value="Submit">
</form>
</body>
解決方案4
0 2017-07-11 18:30:02
看起來你的代碼中有一系列拼寫錯誤，試試這個
<!DOCTYPE html>
<html>
<body style="background-color: #ccc">
<script>
function validateform() {
var firstnameErr = "";
var valid = true;
var name = document.myform.fname.value;
var types = /^[a-zA-Z]+$/;
if (name == null || name == "") {
firstnameErr = "required";
valid = false;
} else if (!name.match(types)) {
firstnameErr = "format error";
valid = false;
}
return valid;
}
</script>
<form name="myform" method="post" onsubmit="return validateform()" action="/Project/ViewList.php">
Firstname : <input type="text" name="fname" placeholder="First name" maxlength="20">
<span class="error">*
<script>
document.write(firstnameErr);
</script>
</span>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
使用Javascript提交HTML5表單並驗證其輸入
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.