0

好的，所以我想做的是创建一个 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>
4

4 回答 4

0

一种方法是向您的表单添加一个“侦听器”，定期检查表单字段。我已经在这个 jsfiddle中做到了，它可能对你有用吗？

于 2012-04-23T08:13:35.173 回答
0

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

250 毫秒的延迟效果很好。如果你是 JavaScript 新手，你应该学习window.setTimeout和window.clearTimeout.

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

按键时：
    如果存在超时：
        取消现有的超时

    触发新的超时

当超时过期时：
    做验证

    如果验证失败：
        设置错误信息
        显示错误信息
    别的：
        隐藏错误信息

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

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

于 2012-04-23T08:07:49.800 回答
0

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

于 2012-04-23T07:44:02.237 回答
0

这个在 JSP 页面中使用 javascript 进行即时验证的示例。

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

于 2019-01-11T11:54:53.747 回答