如何通过函数验证数据格式、数据和焦点表单字段

Question

需要帮助将此function：

验证数据格式

验证数据是否存在

专注于缺失的字段(一次一个就可以了(

下面的功能是根据一些建议更新的。 它比我的原始效果好得多。 问题是，如果电子邮件field是空白的，它工作得很好，在输入值之前不会继续前进。 但是其他场将正确聚焦，但仍允许 func 移动到else，这只会降低您所看到的不透明度。

function quantity_box() {
// store all your field names in an array
var fieldNames = ["EMAIL", "BILLTOFIRSTNAME", "BILLTOLASTNAME"];
// loop over each field name in that array
for (var i = 0; i < fieldNames.length; i++) {
// extract the field name
var fieldName = fieldNames[i];
// use the field name to index the form object and get the field itself
var field = document.forms["billing_form_id"][fieldName];
// check the field's value to see if it's empty
if (field.value === '') {
field.focus();
// break from our loop, since we've already found an invalid value
break;
}else{
$(".prod_billing_box").delay(0).animate({"opacity": "0"}, 200);
$(".prod_quantity_box").delay(215).animate({"opacity": "1"}, 200); 
}
}

还有一个注释。 即使像EMAIL这样的字段有像TextMode="Email"这样的设置来验证格式是否正确，上面的函数也会忽略它。

Answer 1

你误解了索引的工作原理。以下行有效，但未按预期执行

。

["EMAIL" && "BILLTOFIRSTNAME" && "BILLTOLASTNAME"]

这实际上是使用and运算执行布尔表达式，就像在 if 语句中一样。如果你实际上在你的javascript控制台中运行了这一行，它将打印出来。

"BILLTOLASTNAME"

这仍然有效，但不是您想要的。

相反，您需要遍历所有表单字段并检查每个表单字段以确保其有效。如果任何字段无效，则可以break出循环。

// track if the entire form is valid, start true
var allValid = true;
// store all your field names in an array
var fieldNames = ["EMAIL", "BILLTOFIRSTNAME", "BILLTOLASTNAME"];
// loop over each field name in that array
for (var i = 0; i < fieldNames.length; i++) {
// extract the field name
var fieldName = fieldNames[i];
// use the field name to index the form object and get the field itself
var field = document.forms["billing_form_id"][fieldName];
// check the field's value to see if it's empty
if (field.value === '') {
field.focus();
// our entire form isn't valid
allValid = false;
// break from our loop, since we've already found an invalid value
break;
}
}
// if we make it this far and allValid is still true...
if (allValid) {
// perform your "else" code here
}

Answer 2

一种值得注意的是，所有这些都可以在没有JavaScript的情况下使用HTML5表单字段验证器来完成。只要您在<form>标记中编写表单字段，您就可以将验证器(如required(添加到字段中，表单将不会提交，并显示验证警告，直到验证器全部通过。 下面是一个工作示例。

<form>
<input type="text" required placeholder="Must fill me in"><br/>
<input type="checkbox" required> Must be checked<br/>
<input type="radio" name="radiogroup" required> One must be chosen<br/>
<input type="radio" name="radiogroup"> One must be chosen 2<br/>
<input type="email" placeholder="Must be an email if filled"><br/>
<br/>
<button type="submit">Submit</button>
</form>

还可以查询表单元素本身以及它是否有效，以及使用:validCSS 表单选择器来设置有效和无效字段的样式。