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

Question

我想按照下面的粘貼代碼來驗證表單的文本字段“用戶名”。 驗證是使“用戶名”文本字段為必填字段。

我在這里面臨的問題是文本字段沒有得到驗證，並且提交按鈕的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>

Answer 1

可以使用文本框上新的HTML5 required屬性，使其在客戶端成為必需，而不是使用自定義JavaScript來驗證表單（不應該依賴它來實際驗證表單，因為它可以被繞過）。

Answer 2

<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();
    }
}

Answer 3

  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))) { errMsgHolder.innerHTML= 'Only alphabets allowed' } else if(!(/^(?:(\\w)(?!\\1\\1))+$/.test(input))) { errMsgHolder.innerHTML= '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>

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

問題描述

3 個解決方案

解決方案1
0 2014-05-17 10:57:12

解決方案2
0 2014-05-17 11:05:24

解決方案3
0 2016-10-05 11:48:56

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

問題描述

3 個解決方案

解決方案1 0 2014-05-17 10:57:12

解決方案2 0 2014-05-17 11:05:24

解決方案3 0 2016-10-05 11:48:56

解決方案1
0 2014-05-17 10:57:12

解決方案2
0 2014-05-17 11:05:24

解決方案3
0 2016-10-05 11:48:56