我尝试做一些编程: 我有这个带有不同输入字段的订单表单(name,amountOfProductA,amountOfProductB,amountOfProduct ...),经过一些验证后,我使用jquery脚本提交了这个表单。
您能否告诉我如何验证这一点? 我应该只是juse type =“text”输入字段吗? (如何检查是否至少填写了一个产品字段?)
这是我的代码:
jQuery(function ($) {
$('#bttn-submit').click(function () {
$('input').css('background', '#fff'); // reset BGcolor
var formOk = true;
var allProdFields = $('input[type=number]') // Selection of all Product('number') fields
var numberOfProdFields = allProdFields.length; // How many ('number') fields are there?
// How many product fields are empty?
var prodFieldsEmpty = 0;
for (i = 0; i < numberOfProdFields; i++) {
if( $(allProdFields[i]).val() == '' || $(allProdFields[i]).val() == 0){
prodFieldsEmpty++;
}
}
// Is there at least one product field filled?
if(prodFieldsEmpty == numberOfProdFields){
var formOk = false;
alert('Form not OK');
allProdFields.css('background', '#f30302');
}
// Is the name field filled?
if( $('#pesoonNaam').val() == '') {
$('#pesoonNaam').css('background', '#f30302');
var formOk = false;
}
if( formOk == true ) {
document.actieForm.submit();
}
})
})
答案 0 :(得分:0)
以下代码不允许用户在仅限字段中输入字符。因为类型=&#34;数字&#34;是html5并且不适用于所有浏览器。
$(document).on('keydown', '.numeric-input', function(event) {
var dot_split = $(this).val().split('.');
if ($.inArray(event.keyCode,[46,8,9,27,13]) !== -1 || (event.keyCode == 65 && event.ctrlKey === true) || (event.keyCode >= 35 && event.keyCode <= 39) && dot_split.length <= 2) {
// let it happen, don't do anything
return;
}else{
// Ensure that it is a number and stop the keypress
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
event.preventDefault();
}
}
})
然后,如果任何字段为空,您可以使用.each进行检查。
prodFieldsEmpty = 0;
$('.numeric-input').each(function(){
if($(this).val() != ""){
prodFieldsEmpty++;
}
})
我希望这会对你有所帮助!
答案 1 :(得分:0)
您可以尝试像:
function checkInputs(){
result = false;
$('input[type="number"]').each(function(){
if($(this).val() != '' && isNumeric($(this).val())) result = true;
})
return result;
}
UPD:Fiddle
答案 2 :(得分:0)
您不应将验证附加到提交按钮,因为用户可以在不按下的情况下提交表单,将验证附加到表单的提交处理程序:
jQuery(function ($) {
$('#formID').submit(
...
jQuery有一个each迭代方法,所以:
$('input[type=number]').each( function(index) {
/* do validation */
});
在每个中,函数的 this 设置为当前元素,因此您可以这样做:
if (this.value == 0) {
prodFieldsEmpty++;
}
表单控件的值始终是字符串,因此如果值为this.value == 0
或'0'
(空字符串),则测试''
将返回true。如果您不喜欢使用类型强制,那么请执行:
if (this.value === '0' || this.value === '') {
如果你想检查这个值是一个整数,那么这里有任意数量的答案,最简单的可能是接受的答案here:
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
请注意,这将允许所有类型的数字,例如2.34e3。如果你只想允许说正整数,你可以尝试:
function isPositiveInt(n) {
return /^\d+$/.test(n); // or return !/\D/.test(n)
}
同样,有很多方法可以解决这个问题。
不是计算字段的数量,而是计算通过的数量,如果你只想检查至少有一个是否通过,设置一个标志:
var passNumeric = false;
$('input[type=number]').each( function(index) {
if (isNumber(this.value)) {
passNumeric = true;
} else {
// do something with fails?
}
});
您可以使用else分支对失败(或什么都没有)执行某些操作。