表单验证设计设置 [英] form validation design setup
问题描述
大家好，
现在我正在处理我的第一个主要开放表格（
不受控制的用户我的意思是，不是一个安全的后端接口），我想添加
a很多可能性来检查某些字段是否符合某些
标准，并告知当数据错误时，用户会以不同的方式使用
（当然，这将在再次发布数据时进行检查，但那是'b $ b'我有的东西很多经验）。
现在，可以直接添加各种各样的
事件，从而可以撤销（或者至少不可取）在HTML代码中直接，因为验证中有很多重复的b
。由于我在使用
javascript方面没有经验，我想知道你对以下计划的看法，然而我才开始：
开始：
生成表单时，我可以将类名添加到
输入（/ textarea / select），并添加检查，例如，我有：
< input class =" major validateAlpha" type =" text">
< input class =" minor validateAlphaNonEmpty some_other_class" type =" text">
< input class =" highlight validateAlphaNonEmpty remoteUsername">
< input class =" small validateChecked" type =" checkbox">
输入类型存储在数据库中（这就是我确定要为输入提供哪些类
的方式），并在标题中调用动态js，并带有一个
验证对象：
var验证= {
''Alpha'' ：{
''property''：''value''，
''输入''：''正则表达式''
' 'value''：''/ ^ [az] * $ / i''，
''msg''：''只有字母az。''
}
''AlphaNonEmpty''：{
''property''：''value''，
''type''：' '正则表达''
''价值''：''/ ^ [az] + $ / i''，
''msg''：''只有字母az，一定不能为空。''
}
''已检查''：{
''property''：''已选中''，
''输入''：''比较''
''价值''：真实，
''msg' ： 必须检查。'
}
}
现在，在窗口的onload事件中，一个函数是被解雇。这个函数
为表单的submit事件添加一个函数。这个函数将循环
到表单元素，检查className匹配
/ \bvalidate（[a-z] *）\ b / i。如果匹配，则先前捕获的验证
名称取自Validation对象，这给出：
1.要检查的属性（value，selectedIndex，checked etc.等） ）
2.必须做什么样的比较（直接检查价值或使用
a正则表达式）
3.应该是什么比较/匹配。
4.应该给出什么信息来帮助用户纠正他可能的
错误。
当一个或多个字段无效时，提交将被取消，并向用户提供有关更改内容的提示。可能会添加
一个''错误''类名，它会给它一个红色边框或一个红色标签或
某些东西，可能会提示那里应该有什么样的数据。在onchange事件上重新验证后，还可以删除效果
desirable（element.className = element.className.replace（''/ /\\\\ b /''，''''）。
如果一切都有效，那么就让你的提交继续下去。
我也得到了' 'remote ...''classname，在检查时应使用
XMLHTTPRequest，并将/ \ bremote（[az] *）\ b /中的捕获作为GET变量转换为
服务器，它将以一个对象响应：
{
''有效''：false，//或真正的幕后
''msg''：''用户名已被占用。''
}
此对象已经过检查，这是一个有效值，并且可能
显示
错误信息，停止提交。（如果请求失败，请允许它提交并让服务器将其记录下来。）
介于两者之间的快速问题：如果我用这样的JSON对象回答，mu我使用了
eval（）的ResponseText，还是有更好的方法？
那就是计划的核心。出于学习目的，我真的想从
scratch中写出大部分内容，但是在这样的事情之前我想要b $ b确保我走在正确的轨道上。
所以：
- 我会使用大量的JSON，这是否得到所有/大多数主流浏览器的支持
像这样？
- 使用这样的类名这个好主意。如果不是，为什么，以及如何
为某个字段分配一定的验证？
- 建议的流程是否合乎逻辑？
- 是否存在重大缺失/错误？
- 也可以更好地验证onchange事件中的每个元素，
或不是？
欢迎所有评论和建议，并提前致谢，
-
Rik Wasmus
Hello guys,
now that I''m that I''m working on my first major ''open'' forms (with
uncontrolled users I mean, not a secure backend-interface), I''d like to add
a lot of possibilities to check wether certain fields match certain
criteria, and inform the user in different ways when the data is wrong
(offcourse, this will be checked on posting the data again, but that''s
something I''ve got a lot of experience with).
Now, offcourse it''s undoable (or at least not desireable), to add all kinds
of events directly in the HTML code directly, certainly since there''s a lot
of duplication in validation. Since I''m not that experienced in using
javascript, I wonder what you think about the following plan before I
start:
When generating the form, I can add classnames to the
input(/textarea/select), and add checks on that, for instance, I''ve got:
<input class="major validateAlpha" type="text">
<input class="minor validateAlphaNonEmpty some_other_class" type="text">
<input class="highlighted validateAlphaNonEmpty remoteUsername">
<input class="small validateChecked" type="checkbox">
Input types are stored in a database (that''s how I determined what classes
to give to the inputs), and a dynamic js is called in the header, with a
Validation object:
var Validation = {
''Alpha'':{
''property'':''value'',
''type'':''regex''
''value'':''/^[a-z]*$/i'',
''msg'':''Only letters a-z.''
}
''AlphaNonEmpty'':{
''property'':''value'',
''type'':''regex''
''value'':''/^[a-z]+$/i'',
''msg'':''Only letters a-z, must not be empty.''
}
''Checked'':{
''property'':''checked'',
''type'':''compare''
''value'':true,
''msg'':''Must be checked.''
}
}
Now, on the onload event of the window, a function is fired. This function
adds a function to the submit event of the form. This function will loop
through to form elements, checking for className matching
/\bvalidate([a-z]*)\b/i. If it matches, the previous captured validation
name is taken from the Validation object, and this gives:
1. What property to check (value, selectedIndex, checked etc.)
2. What kind of comparison has to be done (check the value directly or use
a Regex)
3. What is should be compared/matched to.
4. What message should be given to help the user to correct his possible
error.
When one or several of the fields are ''invalid'', the submitting is
cancelled, and the user is given hints on what to change. Possibly adding
an ''error'' classname which will give it a red border or a red label or
something, maybe tip on what kind of data should be in there. Also a
removal of the effect after a revalidation on the onchange event seems
desirable (element.className = element.className.replace(''/\berror\b/'','''').
If everything''s valid, offcourse let the submitting go on.
I also got a ''remote...'' classname, which on checking should use a
XMLHTTPRequest, with the capture in /\bremote([a-z]*)\b/ as GET variable to
the server, which will respond with an object:
{
''valid'': false,//or true offcourse
''msg'':''Username is already taken.''
}
This object is checked on wether this is a valid value, and a possible
error message is displayed, submitting is stopped.(If the request fails,
let it submit and let the server figure it out offcourse.)
Quick question in between: if I answer with such an JSON object, must I use
eval() the ResponseText, or is there a better way?
That''s about the core of the plan. I really want to write most of this from
scratch for learning purposes, but before such an undertaking I want to
make sure I''m on the right track.
So:
- I''ll be using a lot of JSON, is this supported by all/most major browsers
like this?
- Is using classnames like this a good idea. If not, why, and how can I
assign a certain validation to a field?
- Is the suggested flow a logical one?
- Is there something major missing/wrong?
- Is it perhaps better to validate each element on the onchange event also,
or not?
All remarks and suggestions welcome, and thanks in advance,
--
Rik Wasmus
推荐答案
/ i''，
''msg''：''只有字母az。''
}
''AlphaNonEmpty''：{
''property''：''value''，
''type''：''regex''
''value''：''/ ^ [az] +
/i'',
''msg'':''Only letters a-z.''
}
''AlphaNonEmpty'':{
''property'':''value'',
''type'':''regex''
''value'':''/^[a-z]+
/ i''，
''msg''：' '只有字母az，不能为空。''
}
''选中''：{
''property''： ''检查''，
''输入''：''比较''
''val ue''：true，
''msg''：''必须检查。''
}
}
现在，在窗口的onload事件中，会触发一个函数。这个函数
为表单的submit事件添加一个函数。这个函数将循环
到表单元素，检查className匹配
/ \bvalidate（[a-z] *）\ b / i。如果匹配，则先前捕获的验证
名称取自Validation对象，这给出：
1.要检查的属性（value，selectedIndex，checked etc.等） ）
2.必须做什么样的比较（直接检查价值或使用
a正则表达式）
3.应该是什么比较/匹配。
4.应该给出什么信息来帮助用户纠正他可能的
错误。
当一个或多个字段无效时，提交将被取消，并向用户提供有关更改内容的提示。可能会添加
一个''错误''类名，它会给它一个红色边框或一个红色标签或
某些东西，可能会提示那里应该有什么样的数据。在onchange事件上重新验证后，还可以删除效果
desirable（element.className = element.className.replace（''/ /\\\\ b /''，''''）。
如果一切都有效，那么就让你的提交继续下去。
我也得到了' 'remote ...''classname，在检查时应使用
XMLHTTPRequest，并将/ \ bremote（[az] *）\ b /中的捕获作为GET变量转换为
服务器，它将以一个对象响应：
{
''有效''：false，//或真正的幕后
''msg''：''用户名已被占用。''
}
此对象已经过检查，这是一个有效值，并且可能
显示
错误信息，停止提交。（如果请求失败，请允许它提交并让服务器将其记录下来。）
介于两者之间的快速问题：如果我用这样的JSON对象回答，mu我使用了
eval（）的ResponseText，还是有更好的方法？
那就是计划的核心。出于学习目的，我真的想从
scratch中写出大部分内容，但是在这样的事情之前我想要b $ b确保我走在正确的轨道上。
所以：
- 我会使用大量的JSON，这是否得到所有/大多数主流浏览器的支持
像这样？
- 使用这样的类名这个好主意。如果不是，为什么，以及如何
为某个字段分配一定的验证？
- 建议的流程是否合乎逻辑？
- 是否存在重大缺失/错误？
- 也可以更好地验证onchange事件中的每个元素，
或不是？
欢迎所有评论和建议，并提前致谢，
-
Rik Wasmus
/i'',
''msg'':''Only letters a-z, must not be empty.''
}
''Checked'':{
''property'':''checked'',
''type'':''compare''
''value'':true,
''msg'':''Must be checked.''
}
}
Now, on the onload event of the window, a function is fired. This function
adds a function to the submit event of the form. This function will loop
through to form elements, checking for className matching
/\bvalidate([a-z]*)\b/i. If it matches, the previous captured validation
name is taken from the Validation object, and this gives:
1. What property to check (value, selectedIndex, checked etc.)
2. What kind of comparison has to be done (check the value directly or use
a Regex)
3. What is should be compared/matched to.
4. What message should be given to help the user to correct his possible
error.
When one or several of the fields are ''invalid'', the submitting is
cancelled, and the user is given hints on what to change. Possibly adding
an ''error'' classname which will give it a red border or a red label or
something, maybe tip on what kind of data should be in there. Also a
removal of the effect after a revalidation on the onchange event seems
desirable (element.className = element.className.replace(''/\berror\b/'','''').
If everything''s valid, offcourse let the submitting go on.
I also got a ''remote...'' classname, which on checking should use a
XMLHTTPRequest, with the capture in /\bremote([a-z]*)\b/ as GET variable to
the server, which will respond with an object:
{
''valid'': false,//or true offcourse
''msg'':''Username is already taken.''
}
This object is checked on wether this is a valid value, and a possible
error message is displayed, submitting is stopped.(If the request fails,
let it submit and let the server figure it out offcourse.)
Quick question in between: if I answer with such an JSON object, must I use
eval() the ResponseText, or is there a better way?
That''s about the core of the plan. I really want to write most of this from
scratch for learning purposes, but before such an undertaking I want to
make sure I''m on the right track.
So:
- I''ll be using a lot of JSON, is this supported by all/most major browsers
like this?
- Is using classnames like this a good idea. If not, why, and how can I
assign a certain validation to a field?
- Is the suggested flow a logical one?
- Is there something major missing/wrong?
- Is it perhaps better to validate each element on the onchange event also,
or not?
All remarks and suggestions welcome, and thanks in advance,
--
Rik Wasmus
嗨Rik，
Hi Rik,
现在我正在研究我的第一个主要开放形式（
不受控制的用户我的意思是，不是一个安全的后端接口），我想添加
a很多可能性来检查某些字段是否符合某些
标准，当数据错误时以不同的方式通知用户
（当然，这将在再次发布数据时进行检查，但那是'b
'我是什么意思我有很多经验）。
now that I''m that I''m working on my first major ''open'' forms (with
uncontrolled users I mean, not a secure backend-interface), I''d like to add
a lot of possibilities to check wether certain fields match certain
criteria, and inform the user in different ways when the data is wrong
(offcourse, this will be checked on posting the data again, but that''s
something I''ve got a lot of experience with).
我处于一个非常相似的情况，并且正在研究这几天前的几个小时。
I''m in a very similar situation and was working on this just a few
nights ago.
现在，可以直接在HTML代码中直接添加所有类型的事件，或者是可撤销的（或者至少不是不可取的）当然，因为在验证中有很多重复的b $ b。由于我在使用
javascript方面没有经验，我想知道你对以下计划的看法，然而我才开始：
Now, offcourse it''s undoable (or at least not desireable), to add all kinds
of events directly in the HTML code directly, certainly since there''s a lot
of duplication in validation. Since I''m not that experienced in using
javascript, I wonder what you think about the following plan before I
start:
我认为这是一个非常有趣的想法。
<关于如何完成检查>
我不知道我是否可以使用这个类名方法，因为我必须使用
比常规验证少一些。
I think this is a very interesting idea.
<snip about how the checking is done>
I don''t know if I could use this class name method as I have to use
some less than routine validations.
当一个或多个字段无效时，提交的内容将被取消，并向用户提供有关更改内容的提示。可能会添加
一个''错误''类名，它会给它一个红色边框或一个红色标签或
某些东西，可能会提示那里应该有什么样的数据。在onchange事件上重新验证后，还可以删除效果
desirable（element.className = element.className.replace（''/ /\\\\ b /''，''''）。
如果所有内容都有效，请让提交继续进行。
When one or several of the fields are ''invalid'', the submitting is
cancelled, and the user is given hints on what to change. Possibly adding
an ''error'' classname which will give it a red border or a red label or
something, maybe tip on what kind of data should be in there. Also a
removal of the effect after a revalidation on the onchange event seems
desirable (element.className = element.className.replace(''/\berror\b/'','''').
If everything''s valid, offcourse let the submitting go on.
I我想要一个统一的方式来显示这些错误。我把我想要使用的东西放在一起
。这可能会帮助你解决问题的最后一部分
。
< URL
http://peter.michaux.ca/examples/form-validation/form-validation-example.html>
要以统一的方式对许多不同的页面进行此指示，并使用不同的表单布局，这些大技巧不会弄乱表格
布局，每个字段都有少量错误消息，并在每个字段周围显示合理的
指示符。
我决定使用Ruby on Rails对错误消息进行分组在
t op的形式，然后用红色概述问题字段将是
好。
概述错误字段很难，因为浏览器不是
兼容。某些表单元素在某些浏览器中可以有轮廓。
在我的示例中，Safari中多重选择的红色边框不会是
看起来不错但是它确实有一些迹象。我还没有用过多次选择
而且Safari也不是那么常见。
我使用navigator.userAgent确定哪个浏览器如果需要非默认行为，脚本运行并根据适用于该b / b
浏览器的元素调整元素的样式。我在IE，Firefox，
Safair和Opera中测试过。使用navigator.userAgent被认为是一个围绕
comp.lang.javascript的罪恶，并且有充分的理由。不过我觉得这可能是合理的。在一个不常见的情况下，浏览器没有使用navigator.userAgent标识自己的预期，红色边框
可能不会出现或者看起来有点不同，因为我打算br />
错误使用的红色指示在该浏览器上不起作用。这个
并不重要，因为分组的错误消息仍会显示在表单顶部的
。使用浏览器我没有测试有一个很好的机会
，默认的红色指标在某些时候也不起作用。这个
对我来说并不是一个大问题，因为该组消息将在
顶部，并且这些浏览器无论如何都不常见。我可以改变所以我是不是使用navigator.userAgent进行浏览器检测但是这些
其他浏览器可能仍然没有正确显示红色指示。
分组信息是我的重要部分，红色轮廓是奖金
如果它们有效。
另一种方式我想到这样做是为了打出页面，
标记中已有错误指示，但没有显示
红色。然后，如果发生错误，只需在指标中添加一个类名，即
使其变为红色。这可以使用内联错误消息以及
而不是我正在使用的分组消息来完成。这很复杂，因为可能需要为特定的
字段显示多条消息，并且消息的空间必须可用。虽然这个
方法可能会为所有浏览器显示类似的红色错误，但是我没有选择这种方法的原因是因为标记需要很多
每个页面的时间更长，我并不总是会做标记所以
有人可能会搞砸这个，以及浏览器不能使用
上面的示例是一个很小的百分比（可能远小于没有JavaScript的浏览器的百分比）。
有人在这里关于我的选择咆哮。
I do want a uniform way to show these errors. I put together a little
of what I am thinking of using. This might help you with the last part
of your problem.
<URL
http://peter.michaux.ca/examples/form-validation/form-validation-example.html>
To do this indication in a uniform way for many different pages with
different form layouts, the big tricks are not messing up the form
layout with little error messages for each field and showing reasonable
indicators around each field.
I decided the Ruby on Rails way of grouping the error messages at the
top of the form and then outlining the problem fields with red would be
good.
Outlining the error fields is difficult because the browsers are not
compatible. Some form elements can have outlines in some browsers.
In my example the red border on a multiple select in Safari doesn''t
look good but it does make some indication. I haven''t ever used a
multiple select and Safari isn''t so common anyway.
I used navigator.userAgent to determine which browser the script is
running in and style the elements according to what works for that
browser if it needs non-default behavior. I tested in IE, Firefox,
Safair and Opera. Using navigator.userAgent is considered a sin around
comp.lang.javascript and for good reason. However I think here it might
be justified. In the uncommon situation where a browser is not
identifying itself as expected with navigator.userAgent the red border
may not appear or may look a little different then I intended because
the incorrectly used red indication doesn''t work on that browser. This
is not critical because the grouped error message will still appear at
the top of the form. With browser I didn''t test there is a good chance
that the default red indicators don''t work some of the time also. This
isn''t such a big concern for me because that group message will be at
the top and those browsers are not common anyway. I could change so I''m
not using navigator.userAgent for browser detection but then these
other browser may still not show the red indicators properly. The
grouped message is my important part and the red outlines are a bonus
if they work.
The other way I thought about doing this was to lay the page out with
the error indicators already in the markup but without them showing
red. Then if an error occurs just add a classname to the indicator to
make it go red. This could be done with inline error messages as well
instead of the grouped message I am using. This is complicated by the
fact that more than one message may need to be shown for a particular
field and the space for the messages must be available. Eventhough this
method could potentially show similar red errors for all browsers, the
reason I didn''t choose this method is because the markup will take much
more time for each page, I''m not always going to be doing the markup so
someone might mess this up, and the browsers that don''t work with the
example above are a small percentage (probably far smaller than the
percentage of browsers without JavaScript).
Someone here is going to bark about my choices.
我还有一个''远程......''类名，在检查时应该使用
XMLHTTPRequest，将/ \ bremote（[az] *）\ b /中的捕获作为GET变量，以服务器的形式回复
，它将响应一个对象：
{
''有效''：false，//或真正的幕后
''msg''：''用户名已被占用。'''br />
}
检查此对象是否为有效值，并显示可能的
错误消息，提交已停止。（如果请求失败，
让它提交并让服务器将其计算出来。）
I also got a ''remote...'' classname, which on checking should use a
XMLHTTPRequest, with the capture in /\bremote([a-z]*)\b/ as GET variable to
the server, which will respond with an object:
{
''valid'': false,//or true offcourse
''msg'':''Username is already taken.''
}
This object is checked on wether this is a valid value, and a possible
error message is displayed, submitting is stopped.(If the request fails,
let it submit and let the server figure it out offcourse.)
将所有远程验证合并为一个可能是一个好主意/>
请求服务器。
Probably a good idea to lump all the remote validations into just one
request to the server.
介于两者之间的快速问题：如果我用这样的JSON对象回答，我必须使用
eval（）ResponseText，还是有更好的方法？
Quick question in between: if I answer with such an JSON object, must I use
eval() the ResponseText, or is there a better way?
如果您知道JSON是安全的，那么我认为使用
eval没有问题。但是，JavaScript中有一个JSON解析器
< URL http://www.json.org/js.html>
此解析器修改了一些内置的JavaScript对象的原型。那个
意味着你可能想修改这个解析器，所以它不会破坏你的其他代码。底部附近只有几行可以改变你将调用方法的方式。
If you know the JSON is safe then I think there is no problem using
eval. However there is a parser for JSON in JavaScript
<URL http://www.json.org/js.html>
This parser modifies some built in JavaScript objects'' prototypes. That
means you probably want to modify this parser so it doesn''t break your
other code. There are only a few lines near the bottom to change how
you will call the methods you will call.
那个关于计划的核心问题。出于学习目的，我真的想从
scratch中写出大部分内容，但是在这样的事情之前我想要b $ b确保我走在正确的轨道上。
所以：
- 我会使用大量的JSON，这是否得到所有/大多数主流浏览器的支持
像这样？
That''s about the core of the plan. I really want to write most of this from
scratch for learning purposes, but before such an undertaking I want to
make sure I''m on the right track.
So:
- I''ll be using a lot of JSON, is this supported by all/most major browsers
like this?
据我所知，多年前的所有浏览器都可以使用。对于
JSON eval方法，浏览器需要支持对象和数组
literals和eval（）。
As far as I know all browsers since many years ago will work. For the
JSON eval method, the browser needs to support object and array
literals and eval().
- 使用这样的类名是个好主意。如果没有，为什么，我怎么能为某个领域分配一定的验证？
- Is using classnames like this a good idea. If not, why, and how can I
assign a certain validation to a field?
如果需要使用这种技术的JavaScript库很小，那么它可能很棒。
If the JavaScript library needed to use this technique is small then it
might be great.
- 建议的流程是否合乎逻辑？
- 是否存在重大缺失/错误？
- Is the suggested flow a logical one?
- Is there something major missing/wrong?
当您需要一些特殊的自定义验证时会发生什么？假设两个
字段相互依赖，比如开始日期和结束日期。你将会想要能够编写一些自定义的JavaScript，它会检查结束日期是否在开始日期之后。
。你怎么能把它变成你的类名方案？
What happens when you need some special custom validation? Say two
fields that depend on each other like a start and end date. You will
want to be able to write some custom JavaScript that will check that
the end date comes after the start date. How can you work this into
your class name scheme?
- 也许更好地验证onchange事件中的每个元素，
与否？
- Is it perhaps better to validate each element on the onchange event also,
or not?
我会发现验证onchange有点烦人，因为这不是我用过网页时习惯的
。其他人可能有一个很好的
理由为什么使用onchange会很好。
彼得
I would find validation onchange a bit annoying because that is not
what I''m used to when I use web pages. Someone else may have a good
reason why using onchange would work well.
Peter
这篇关于表单验证设计设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
