防止无效用户输入的Javascript [英] Javascript to prevent invalid user input
问题描述
我编写了一组 javascript 函数，允许我验证表单上的用户输入.我只想接受有效的输入，并强加以下行为:
I have written a set of javascript functions that allow me to validate user input on a form. I only want to accept valid input, and impose the following behaviour:
当用户输入无效表单时，我会显示警报并通知他们输入的值不正确.至关重要的是，表单中的原始(有效)值不会改变.
When a user enters an invalid form, I display an alert and inform them that the value entered is incorrect. Crucially, the original (valid) value in the form is not changed.
只有在值被验证后才会改变值.
The value is only changed when the value has been validated.
例如，假设我只想在一个字段中接受正整数.
For example, suppose I want to accept only positive integers in a field.
这是描述所需行为的事件序列.
This is the sequence of events that describes the desired behaviour.
场景 1(有效输入)
- 在输入字段中使用有效的默认值加载表单
- 用户输入有效号码
- 输入字段值已更新(按照正常表单行为)
场景 2(无效输入)
- 在输入字段中使用有效的默认值加载表单
- 用户输入的号码无效
- 警报框显示警报('无效值')
- 输入字段值未更改(即该值与用户输入无效数字之前的值相同)
我目前面临的唯一问题(即这个问题寻求答案的原因)是场景 2，行动点 4.更具体地说，问题退化为以下问题:
如果我(以某种方式)确定用户输入的值无效，我如何阻止字段的值发生变化.这真的，我只想回答.
How do I stop the value of a field from changing, if I (somehow) determine that the value being entered by the user is invalid. This is really, all I'm trying to answer.
我也在做服务器端检查，这个问题只是关于前端 - 即如果我确定该值不正确，则拒绝更改字段(表单文本输入)值.
I am also doing server side checks, this question is just about the front end - i.e. refusing to change a field (form text input) value if I determine that the value is incorrect.
顺便说一句，我正在使用 jQuery，并希望以一种将行为与显示分开的方式来实现这一点(我认为这就是不显眼"一词的含义?)
BTW, I am using jQuery, and would like to implement this in a manner that separates behaviour from display (I think this is what is meant by the term 'unobtrusive' ?)
关于如何实现上述行为的任何建议，我们将不胜感激.
Any suggestions on how to implement this behaviour as described above, would be very much appreciated.
PS:我不想为此使用另一个 jQuery 插件.我应该能够使用 jQuery + 我已经编写的简单 javascript 验证函数.
PS: I dont want to use yet another jQuery plugin for this. I should be able to use jQuery + the simple javascript validation functions I have already written.
推荐答案
在加载页面时，您不能创建一个隐藏的表单值或 js 变量来存储字段的初始/默认值吗?当他们更改表单字段时，对其进行验证，如果通过，则更新隐藏字段或 js 变量以匹配他们更新的字段中的字段.
When loading the page, couldn't you create a hidden form value or js variable in which you store the initial/default value for the field? When they change the form field, validate it, and if it passes, update the hidden field or js variable to match that in the field they updated.
当用户提供的输入未通过验证时，显示无效条目以及错误消息，然后将表单字段更新回您保存的值，这将是默认值或他们输入的最后一个有效值.
When the input given by the user fails validation, show the invalid entry along with the error message and then update the form field back to the value you have saved which would be either the default value or the last valid value that they entered.
请注意，这只是一个快速且(非常)肮脏的示例，用于执行我在上面的回答中所解释的内容.如果您有很多输入，您可能希望将值存储在关联数组中而不是隐藏表单值中，但这应该可以让您很好地理解我的建议.我还强烈建议您不要使用警告框来通知无效答案.
Note that this is only a quick and (very) dirty example of doing what I explained in my answer above. If you have a lot of inputs, you will probably want to store the values in an associative array instead of in hidden form values, but this should give you a good handle on what I am suggesting. I would also strongly encourage you to NOT use alert boxes for notification of invalid answers.
<html>
<head>
<script type="text/javascript">
function validate()
{
var field1 = document.getElementById("field1");
var saved = document.getElementById("field1_save");
if (field1.value < 0 || field1.value > 10)
{
alert("Field1 value of " + field1.value + " is invalid");
// Change the value back to the previous valid answer
field1.value = saved.value;
return false;
}
// Save the valid input
saved.value = field1.value;
return true;
}
</script>
</head>
<body>
Test User Input
<form name="form1" id="form1" method="post">
<input name="field1" id="field1" type="text" value="2" onblur="validate();"/>
<input name="field1_save" id="field1_save" type="hidden" value="2" />
<input name="btnSubmit" type="submit" value="Submit" />
</form>
</body>
</html>
这篇关于防止无效用户输入的Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
