如何客户端实时验证表单与选择，广播，复选框，文本，文件输入，只需使用JavaScript？

Question

我有一个用户配置页面，其中包含许多表单输入。 我想实时验证输入以避免在用户输入文本输入时出现格式错误，检查文件名并在用户输入select，radio，checkbox输入时弹出一些信息。 我只想知道方法shuold我用于上面的每个类型输入。

Answer 1

您必须编写一个逻辑来为您进行验证。 一旦你编写了它，就可以使用jquery的keyup事件，它会在你输入内容时立即调用该函数。

例如，下面的代码段会在您开始输入后立即进行实时验证。 如果键入的文本只包含字母，那么就不会出现错误（如果有的话，它会消失），只要你键入了任何数字，它就会显示错误。

 $("#only-text").on("keyup", function() { realTimeValidate(); }); function realTimeValidate() { var inputField = document.getElementById("only-text").value; if(!isAlphaOrParen(inputField)) document.getElementById("showerror").innerHTML = "Please enter only numbers"; else document.getElementById("showerror").innerHTML = ""; } function isAlphaOrParen(str) { return /^[a-zA-Z()]+$/.test(str); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Type only Text (error will be generated if you type a number) : <br><input id="only-text" type="text"/><br> <span id="showerror" style="color:red"></span>