Question

好的，我想要做的是创建一个JavaScript代码，检查用户的输入并查看它是否与规则匹配，并在文本字段旁边显示错误消息，说“xxx不是有效条目”

例如，如果规则是第一个字符必须是大写字母，后跟一个数字，它不能有任何特殊字符。

用户键入类似“13da2343 *”的内容，结果应为“无效条目，第一个字符应为大写字母，特殊字符为无效条目”。哪个应该显示在文本字段旁边。

我不知道如何为自己开始这个。请帮助，我是JavaScript的新手

修改

这是我到目前为止为我的网站提供的整个代码。我不知道怎么说它输入的特定字符无效，而且它本身就在文本字段旁边。

    <!DOCTYPE html>
<html>
<head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> THING </title>
<meta name="Author" content="Dhruvin Desai" />
<link rel="stylesheet" type="text/css" href="style.css" />

<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
document.forms[0].addEventListener('submit', function(event) {
    event.preventDefault();
    var input = document.getElementsByName('a')[0];

    if (~input.value.search(input.getAttribute('pattern'))) {
        alert('Is valid!');
    } else {
        alert('It's invalid...');
    }
});
}//]]>  

</script>

</head>

<body>
<div id="wrapper">
    <div id="response">
    <form id="form" action="#" >
    <fieldset>
    <LEGEND><br>THING</br></LEGEND>

    <!-- Input Fields -->

    <label for="name"> Username </label>
    <input type="text" name="a" value="" id="name" autofocus="autofocus" autocomplete="off" required="required" placeholder="Username" pattern="^[A-Z][A-Za-z]{0,11}$" onkeyup="check(this)" />
    <span id="confirmMessage" class="confirmMessage"></span>

    <input type="submit" value="Submit" class="submit" />

    </fieldset>
    </form>
</div>

</body>

编辑2

我添加了一个有效但只接受大写字母的新脚本，我只想要第一个字母。

<!DOCTYPE html>
<html>
<head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> IT 202 - Assignment 3 </title>
<meta name="Author" content="Dhruvin Desai" />
<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>

<div id="wrapper">
    <div id="response">
    <form id="form" action="insert_form.php">
    <fieldset>
    <LEGEND><br>Assignment 3</br></LEGEND>

    <!-- Input Fields -->

    <label for="name"> Username </label>
    <input name="name" id="name" autofocus="autofocus" autocomplete="off" required="required" placeholder="Username" onkeyup="check(this.value)" />

    <input type="submit" value="Submit" class="submit" />

    </fieldset>
    </form>
</div>
<script type="text/javascript">

function check(string) 
{
    loop: for (i = 0; i < string.length; i++) 
    {
        var res = string.substring(i, i + 1).match(/[A-Z][A-Za-z]{0,11}/);

        if (!res)
        {
            alert("Error on position " + (i + 1) + ":\n This character is no Letter: "+string.substring(i, i + 1));
            break loop;
        }


    }

}
    </script>
</body>

Answer 1

您可以使用正则表达式检查这些链接 http://www.w3schools.com/jsref/jsref_obj_regexp.asp http://www.w3schools.com/js/js_obj_regexp.asp

Answer 2

您可以使用pattern属性并传递RegExp表达式。对于旧版浏览器，您可以使用h5f或webshim之类的polyfiller。

Answer 3

这种类型的“实时”验证通常使用在每个按键上触发（和重置）的计时器来完成。如果计时器在用户最后一次按键后到期，则验证开始。

250 ms延迟效果很好。如果您不熟悉JavaScript，则应该学习window.setTimeout和window.clearTimeout。

伪代码（否则，我会为你做所有工作）：

when key pressed:
    if existing timeout:
        cancel existing timeout

    fire new timeout

when timeout expired:
    do validation

    if validation failed:
        set error message
        show error message
    else:
        hide error message

对于实际的验证本身，你可以简单地添加一些代码来自己进行验证，或者如果验证是正则表达式的，你可以使用正则表达式。您应该为此研究RegExp对象。

要在字段旁边显示错误消息，一种方法是在标记中嵌入错误容器并最初隐藏它。出错时，填写其内容并显示容器。你应该知道足够的CSS来做到这一点。

Answer 4

一种方法可能是在表单中添加一个“监听器”，定期检查表单字段。我已经在this jsfiddle中完成了它，它可能对你有用吗？

Answer 5

This example of instant validation using javascript in jsp page .
i hope this will help.!

<html>
    <head>

    <script type="text/javascript">
    	function myFunction() {  

    		if((document.getElementById("User").value).length == 0)
    		{
    			document.getElementById("user").innerHTML = "Username is required";
    		}

    		if((document.getElementById("Password").value).length == 0)
    		{
    			document.getElementById("pass").innerHTML = "Password is required";
    		}
    		
    		var uploadfile = document.getElementById('File');

    		if (!(uploadfile .value.match(/pdf$/) || uploadfile .value.match(/PDF$/)))
    		{
    			document.getElementById("file").innerHTML = "Incorrect file type. Only file type .pdf id allowed";
    		}

    		if(uploadfile .value == 0)
    			{
    			document.getElementById("file").innerHTML = "Empty file was uploaded. Please upload a PDF file.";
    			}

    }

    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>test file</title>
    </head>
    <body>
    	<h1>Instant Validation</h1>
    	<form action=""  method="post" 
		style="border: 1px solid green; width: 700px; height: 157px;">

		<table style="width: 800px; ">
			<col width="120"> 
			
			<tr>
				<th align="left">New File</th>
				<td style="width: 100px;"><b>:</b><INPUT ENCTYPE="multipart/form-data" METHOD=POST NAME="File" TYPE="file" id="File" >
				</td>
				<td style="text-align: left; color: red;" id="file"></td>
			</tr>
			</table>
			<table style="width: 800px; height: 80px;">
			<col width="120">
			<tr>
				<th align="left">Username</th>
				<td  style="width: 100px;"><b>:</b><input type="text" name="User"
					id="User" /></td>
				<td style="text-align: left; color: red;" id="user"></td>
			</tr>
			<tr>
				<th align="left">Password</th>
				<td  style="width: 100px;"><b>:</b><input type="password" name="Password"
					id="Password" />
				</td>
				<td style="text-align: left; color: red;" id="pass"></td>
			</tr>
			
		</table>

		<table>
			<tr>
				<button  style = "color: green;" type="reset" value="Reset" onClick="window.location.reload()">Clear</button><a> </a>
				<button  style = "color: green;" type="button" onclick="myFunction()" value="submit">Submit</button>
			</tr>
		</table>
	</form>

    </body>
    </html>

JS中的即时验证

5 个答案: