javascript 输入类型的 Jquery 表单验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22174977/
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 validation on input type
提问by Adam Carlin
I currently have a form which changes dynamically. I'm using all text inputs but they all should only accept numbers.
我目前有一个动态变化的表格。我正在使用所有文本输入，但它们都应该只接受数字。
$("#result-form").validate({
rules: {
.text: {
required: true,
digits: true
}
},
messages: {
.text:{
required: " Please enter a score!",
digits: " Please only enter numbers!"
}
},
submitHandler: function(form) {
form.submit();
}
});
Currently i try to validate using the above but that doesn't work. Any ideas?
目前我尝试使用上述方法进行验证，但这不起作用。有任何想法吗？
回答by Sparky
You cannot do it like this...
你不能这样做...
$("#result-form").validate({
rules: {
.text: { // <-- MUST only be a NAME attribute
required: true,
digits: true
}
},
....
When declaring your rules using .validate()method, you can only declare them using the nameattribute.
使用.validate()方法声明规则时，只能使用name属性声明它们。
If you're creating form elements dynamically, rules can only be changed or applied using the .rules('add')method. You would call this immediately aftercreating the new element and they can be targeted using any jQuery selector you wish.
如果你动态创建表单元素，规则只能改变或使用应用的.rules('add')方法。您可以在创建新元素后立即调用它，并且可以使用您希望的任何 jQuery 选择器来定位它们。
This code will dynamically apply these rules to all type="text"fields on the page.
此代码将动态地将这些规则应用于type="text"页面上的所有字段。
$("#result-form").validate({ // initialize plugin
// other rules and options
});
$('input[type="text"]').each(function() {
$(this).rules('add', {
required: true,
digits: true,
messages: {
required: " Please enter a score!",
digits: " Please only enter numbers!"
}
});
});
Working DEMO: http://jsfiddle.net/2U68C/
工作演示：http: //jsfiddle.net/2U68C/
NOTES:
注意事项：
You mustwrap
.rules()in a jQuery.eachif/whenever the selector may contain more than one element. If you fail to do this, only the first matched element will be validated.You mustensure that all form input elements being considered for validation contain unique
nameattributes. It's how the plugin keeps track of the inputs. If you fail to do this, only the first matched element will be validated.
你必须包装
.rules()在一个jQuery.each如果/每当选择器可以包含多个元素。如果不这样做，则只会验证第一个匹配的元素。您必须确保考虑进行验证的所有表单输入元素都包含唯一
name属性。这是插件跟踪输入的方式。如果不这样做，则只会验证第一个匹配的元素。
SIDENOTE:
旁注：
You don't need this at all...
你根本不需要这个...
submitHandler: function(form) {
form.submit();
}
This is already the default behavior. In fact, form.submit()is the same code inside the plugin. In other words, you do not need to call the submitHandlerin this case. You'd only need to use it if/when you need to over-ride or augment, such as with ajax().
这已经是默认行为。其实form.submit()插件里面的代码是一样的。换句话说，submitHandler在这种情况下您不需要调用。仅当/当您需要覆盖或增强时才需要使用它，例如使用ajax().
回答by fsilva
just to complement @Spark's answer, if you add
只是为了补充@Spark的答案，如果你添加
$('input[type="text"]').on('keyup', function(e) {
$(e.target).valid();
});
you can validate dynamically (in the first time, the input only will be validate after you click out, or focus to some other element)
您可以动态验证（第一次，输入只会在您点击后验证，或聚焦到其他元素）
回答by GuyT
Use the nameinstead of the class.
使用name代替class。
rules: {
nameoftextbox: {
required: true,
digits: true
}
}
To use it with classes:
将它与类一起使用：
jQuery.validator.addClassRules("classname", {
required: true,
digits: true
});
回答by SharkDX
You can add the 'required digits' attributes in the input tags, and do:
您可以在输入标签中添加“必填数字”属性，然后执行以下操作：
var validator = $( "#result-form" ).validate();
validator.form();
This will also allow you to choose specifically which of the text boxes are required. For further reading I suggest you read http://jqueryvalidation.org/documentation/
这也将允许您具体选择需要哪些文本框。如需进一步阅读，我建议您阅读http://jqueryvalidation.org/documentation/
