JS中的即时验证

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

这种类型的"实时"验证通常使用计时器完成，该计时器在每次按键时触发（和重置）。如果计时器自用户上次按键以来过期，则验证将启动。

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

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

按键时：    如果现有超时：        取消现有超时    触发新超时超时过期时：    执行验证    如果验证失败：        设置错误消息        显示错误消息    还：        隐藏错误消息

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

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

您可以使用pattern属性并传递 RegExp 表达式。对于较旧的浏览器，您可以使用 h5f 或 webshim 等填充物。

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

这个在 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>

相关内容

最新更新

热门标签：