JQuery 表单字符串长度验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9142807/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery form string length validation
提问by Louise McMahon
I have some JQuery form validation where im checking the length of the username is not long for the database but it seems to be returning true eveytime.
我有一些 JQuery 表单验证，其中我检查数据库的用户名长度不长，但它似乎正在返回真正的 eveytime。
Am I missing something?
我错过了什么吗？
HTML
HTML
<form name="contact" method"post" action="">
<fieldset>
<label for="username" id="username_label" class="form_label">Username</label>
<input type="text" name="username" id="username" size="30" value="" class="text-input" />
<label class="error" for="username" id="username_error">This field is required. </label>
<label class="error" for="username" id="username_length">Your Username should be less than 30 characters.</label>
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
JavaScript
JavaScript
$(function() {
$('.error').hide();
$(".button").click(function() {
// validate and process form here
$('.error').hide();
var username_length = $("input#username").val().length;
if (username_length < 30) {
$("label#username_length").show();
$("input#username").focus();
return false;
}
}
采纳答案by gdoron is supporting Monica
I have some JQuery form validation where im checking the length of the username is not long for the database but it seems to be returning true eveytime.
我有一些 JQuery 表单验证，其中我检查数据库的用户名长度不长，但它似乎正在返回真正的 eveytime。
You are checking if unsername is shorter then 30, not longer!
您正在检查 unsername 是否短于 30，而不是更长！
if (username_length < 30) {// !!!
note:
笔记：
- There is no need to add element type for id selector id is unique, anything added to it, will increase the overhead of the selector
- 没有必要为id选择器添加元素类型id是唯一的，添加任何东西都会增加选择器的开销
$("input#username")=> $('#username')
$("input#username")=> $('#username')
回答by Lucas Oliveira
You can use JQuery Validator plugin to do this;
你可以使用 JQuery Validator 插件来做到这一点；
just need change your html for something like this;
只需要更改您的 html 即可；
<label for="username">User Name:</label>
<input type="text" name="username" id="username" value="..." />
using this approach you don't need define this multiple tags labels with differents ids (username_error, username_length) to handle every single constraint message,and don't need worry about hide these tags, the jquery plugin will handle this for you and put the appropriate message in lable rotule with 'username' for you. And fell free to customize this messages.
使用这种方法，您不需要定义具有不同 id（username_error、username_length）的多个标签标签来处理每个单个约束消息，也不必担心隐藏这些标签，jquery 插件会为您处理并放置标签 rotule 中带有“用户名”的适当消息。并且可以随意定制这些消息。
your js will be like these;
你的js会是这样的；
$("form[name=contact]").validate({
//...
rules: {
username: {
required: true,
maxlength: 30
}
//...
});
your code will be more clean, See API documetation for more information, http://docs.jquery.com/Plugins/Validation
您的代码将更干净，有关更多信息，请参阅 API 文档，http://docs.jquery.com/Plugins/Validation
