使用javascript驗證HTML中的文本字段

我想根據下面的粘貼代碼驗證表單的文本字段「用戶名」。驗證是使用戶名文本字段是強制性的。使用javascript驗證HTML中的文本字段

，我現在面臨這裏的問題是文本字段沒有得到驗證和的onclick的提交按鈕它直接移動到下一個頁面「的index.html」。有人可以建議我如何在下面的代碼中糾正這個問題？我希望驗證首先發生，然後如果它通過驗證，那麼用戶可以移動到下一頁。

我的代碼：

<html> 
<head> 
<script> 
//validation for username to be a mandatory field 
function ValidateContactForm() 
{ 
    var name = document.ContactForm.userid; 

    if (userid.value == "") 
    { 
     window.alert("Please enter your name."); 
     name.focus(); 
     return false; 
    } 


</script> 
<title> 
Login page 
</title> 
</head> 
<body> 
<h1 style="font-family:Comic Sans Ms;text-align="center";font-size:30pt; 
color:#00FF00;> 
<strong>Welcome</strong> 
</h1> 
<form name="login"> 
Username: <input type="text" name="userid "/><br/> 
Password: <input type="password " name="pswrd"/><br/><br/><br/><br/> 

</form> 
<HEAD> 
<TITLE>Test Input</TITLE> 
<SCRIPT LANGUAGE="JavaScript"> 
function testResults (form) { 
var TestVar = form.submit(); 
} 

</SCRIPT> 
</HEAD> 
<BODY> 
<form method="post" action="index.html" name="ContactForm" onsubmit="return ValidateContactForm();"> 
<input type="submit" value="Submit"> 
<input type="reset" value="Cancel"/> 
</form> 
</BODY> 
</HTML>

來源

2014-05-17 Dojo_user

有一個了Syntex error.close你的函數ValidateContactForm（） – user3091574

而不是使用自定義JavaScript來驗證形式（這不應該在實際驗證形式，因爲它可以被繞過的依據），你可以使用新的HTML5 required屬性在您的文本框，以使其在客戶端的要求。

來源

2014-05-17 10:57:12 The6P4C

你能爲我提供的示例代碼爲可helpful.How我可以使用需要的屬性我上面的代碼，你可以分享一些示範 –

@Dojo如果你在哪裏有'，添加'required'屬性，使它成爲''，你不必做檢查。另外，如果他們有幫助，請接受我或@ Eric的回答。 – The6P4C

這是非常奇怪的是它沒有爲我的代碼工作。這是我在上面的代碼中替換的。

。你能否看到它是否在你的最後工作，因爲它應該工作，這很奇怪。 –

<input type="text" id="userid" /> 
<input type="password" id="pswrd" /> 


$("form").submit(event, function() { 
    var userId = $("#userid"); 
    if (userId.val() == '') 
    { 
     alert("Please enter your name."); 
     userId.focus(); 
     event.preventDefault(); 
    } 
}

來源

2014-05-17 11:05:24 Eric

validateForm = function() { 
 
     return checkName(); 
 
    } 
 

 
    function checkName() { 
 
     var x = document.myForm; 
 
     var input = x.name.value; 
 
     var errMsgHolder = document.getElementById('nameErrMsg'); 
 
     if (input.length < 5) { 
 
      errMsgHolder.innerHTML = 
 
       'Please enter a name with at least 5 letters'; 
 
      return false; 
 
     } else if (!(/^\S{3,}$/.test(input))) { 
 
      errMsgHolder.innerHTML = 
 
       'Name cannot contain whitespace'; 
 
      return false; 
 
     }else if(!(/^[a-zA-Z]+$/.test(input))) 
 
     { 
 
     \t errMsgHolder.innerHTML= 
 
      \t \t \t 'Only alphabets allowed' 
 
     } 
 
     else if(!(/^(?:(\w)(?!\1\1))+$/.test(input))) 
 
     { 
 
     \t errMsgHolder.innerHTML= 
 
      \t \t \t 'per 3 alphabets allowed' 
 
     } 
 
     else { 
 
      errMsgHolder.innerHTML = ''; 
 
      return undefined; 
 
     }  
 
     
 
    }

.error { 
 
    color: #E00000; 
 
}

<form name="myForm" id="myForm" method="post" onsubmit="return validateForm();"> 
 
     First Name: <input type="text" id="name" /> <br /> 
 
     <span id="nameErrMsg" class="error"></span> <br /> 
 
     <!-- ... all your other stuff ... --> 
 
    </form> 
 
     <p> 
 
     1.word should be atleast 5 letter<br> 
 
     2.No space should be encountered<br> 
 
     3.No numbers and special characters allowed<br> 
 
     4.letters can be repeated upto 3(eg: aa is allowed aaa is not allowed) 
 
     </p> 
 
<button id="validateTestButton" value="Validate now" onclick="validateForm();">Validate now</button>

來源

2016-10-05 11:48:56 Hemangi

使用javascript驗證HTML中的文本字段

回答

相關問題