使用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