表单元素上的自定义引导验证
Posted
技术标签:
【中文标题】表单元素上的自定义引导验证【英文标题】：Custom Bootstrap validation on form element 【发布时间】：2020-07-24 17:24:17 【问题描述】：我正在注册表中收集 ABN（澳大利亚商业号码）。我在这里编写了一些基于 ABN 验证规则进行验证的 javascript：
函数 validateABN (abnNumber)
var weights = [10, 1, 3, 5, 7, 9, 11, 13, 15, 17, 19];
var result = false;
if (abnNumber.length === 11)
var sum = 0;
var weight;
for (var index = 0; index <= weights.length - 1; index++)
weight = weights[index];
digit = abnNumber[index] - (index ? 0 : 1);
sum += weight * digit;
result = sum % 89 === 0;
return result;
console.log(validateABN('43154365778'));
表单字段名称为：CompanyABNACN
这是一种引导形式。我对引导程序有点熟悉，但还没有到可以在表单元素上添加自定义表单字段验证的地步。如果 javascript 验证失败，我希望显示一条错误消息“无效的 ABN 格式”。
我在谷歌和堆栈溢出论坛中进行了搜索，但无法找到与我类似的示例，或者我发现了我无法理解的非常复杂的示例。
请有人向我解释一下如何将此自定义功能合并到我的注册表单上的验证中。
<div class="account-hold my-account register">
<div class="container">
<div class="row mt-30">
<div class="col-sm-12">
<h1 class="my-account-label">Create Account</h1><hr class="ghr">
</div>
<div class="col-sm-6 pull-right">
<img src="assets/images/content-images/register/image.jpg" class="img-responsive" />
</div>
<div class="col-sm-6">
<p class="my-account-label-p mb-30">Already have an account? <a href="/login/">Click here</a> to sign in or complete the form below to create a new account</p>
<form name="registrationform" id="registration-form" action="/registration/" method="post" class="form-horizontal validate-form" role="form">
<input type="hidden" name="page" value="register" />
<input type="hidden" name="redirect" value="/content/thank-you-registration/" />
<input type="hidden" id="validated" value="f" />
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">First Name:</label>
<div class="col-lg-8 col-md-8">
<input name="firstname" type="text" id="firstname" placeholder="" class="form-control required" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Last Name :</label>
<div class="col-lg-8 col-md-8">
<input name="lastname" type="text" id="lastname" placeholder="" class="form-control required" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Email Address :</label>
<div class="col-lg-8 col-md-8">
<input name="email" type="email" id="registration-email" placeholder="" class="form-control required email" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">ABN :</label>
<div class="col-lg-8 col-md-8">
<input name="CompanyABNACN" type="text" id="CompanyABNACN" placeholder="" class="form-control required is-invalid" />
<div class="form-control hidden invalid-feedback">Please provide a valid ABN.</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Company :</label>
<div class="col-lg-8 col-md-8">
<input name="CompanyName" type="text" id="CompanyName" placeholder="" class="form-control required company" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Phone Number :</label>
<div class="col-lg-8 col-md-8">
<input name="PhoneNumber" type="text" id="PhoneNumber" placeholder="" class="form-control phone-number" />
</div>
</div>
<input name="birthday" type="hidden" id="birthday" class="form-control" placeholder="" />
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Capricorn Member Number:</label>
<div class="col-lg-8 col-md-8">
<input name="capicorn_number" type="text" id="capicorn_number" class="form-control" placeholder="" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Street Address :</label>
<div class="col-lg-8 col-md-8">
<input name="streetaddress" type="text" id="street-address" placeholder="" class="form-control street-address required auto-streetaddress" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Suburb / City :</label>
<div class="col-lg-8 col-md-8">
<input name="suburb" type="text" id="suburb" placeholder="" class="form-control city required auto-suburb" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">State :</label>
<div class="col-lg-8 col-md-8">
<select name="state" class="form-control required auto-state" id="state">
<option value="">Please Select</option>
<option value="ACT">Australian Capital Territory</option>
<option value="NSW">New South Wales</option>
<option value="NT ">Northern Territory</option>
<option value="QLD">Queensland</option>
<option value="SA ">South Australia</option>
<option value="TAS">Tasmania</option>
<option value="VIC">Victoria</option>
<option value="WA ">Western Australia</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Country : </label>
<div class="col-lg-8 col-md-8">
<select name="country" id="Country" class="form-control clone required auto-country" data-native-menu="false" data-rel="country-field">
<option value="">Please Select</option>
<option value="Australia" >Australia</option>
<option value="New Zealand" >New Zealand</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Post Code : </label>
<div class="col-lg-8 col-md-8">
<input name="postcode" type="text" id="postcode" class="form-control required auto-postcode" placeholder="" />
</div>
</div>
<!---
<input type="hidden" name="password">
<input type="hidden" name="password2">
--->
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Account Password :</label>
<div class="col-lg-8 col-md-8">
<input type="password" name="password" id="password" class="form-control required" placeholder="" autocomplete="off">
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Confirm Password :</label>
<div class="col-lg-8 col-md-8">
<input type="password" class="form-control required" id="password2" name="password2" data-rel="password" placeholder="" autocomplete="off">
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label">Newsletter: </label>
<div class="col-lg-8 col-md-8">
<input type="checkbox" name="newsletter1" id="newsletter1" value="1" checked="true">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-4 col-lg-3 col-md-offset-4 col-md-3 text-left">
<input name="submitbutton" id="submit-button" type="submit" value="Register" class="btn partwise-btn btn-block text-uppercase" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
【问题讨论】：
请提供您的 html。 嗨 @kmoser 我已经包含了 HTML 【参考方案1】：您没有指定何时进行验证，例如当用户输入 ABN 号码或提交表单时。假设是前者，您可以执行以下操作：
-
向 ABN 输入字段添加一个“输入”事件侦听器，以便在用户每次在该字段中输入内容时进行验证：
<input name="CompanyABNACN" type="text" id="CompanyABNACN" placeholder="" class="form-control required is-invalid" oninput="do_validate();" />
（您也可以使用 jQuery 添加事件侦听器，而不是像我上面的示例那样内联。）
-
您的验证函数应如下所示：
function do_validate()
if ( validateABN( $('input#CompanyABNACN').val() ) )
$( '.invalid-feedback' ).hide();
$('input#CompanyABNACN').removeClass( 'is-invalid' )
else
$( '.invalid-feedback' ).show();
$('input#CompanyABNACN').addClass( 'is-invalid' )
【讨论】：
@WebsiteBuilder 不客气！如果我的回复回答了您的问题，请考虑marking it as accepted。谢谢。【参考方案2】：您需要在输入中添加“is-invalid”类以通过 javascript 使 ABN 无效。
<div class="col-md-3 mb-3">
<label for="ABNnumber">Zip</label>
<input type="text" class="form-control" id="ABNnumber" name="ABNnumber" required>
<div class="invalid-feedback">
Please provide a valid ABN.
</div>
</div>
你的javascript应该是这样的
$("form#abnFormSubmit").on("submit", function(e)
e.preventdefault;
var isAbnValid = validateABN($("#ABNnumber").val());
if(!isAbnValid)
$("#ABNnumber").addClass("is-invalid");
else
$("#ABNnumber").removeClass("is-invalid");
)
【讨论】：
请提供有效的 ABN。 只是一直出现在页面上。 已编辑的答案将 else 语句添加到 removeClass("is-invalid")。检查更新的html和js。 invalid-feedback 类是高亮验证后无效的输入。您使用的是什么版本的引导程序。还要确保所有脚本都已加载。以上是关于表单元素上的自定义引导验证的主要内容，如果未能解决你的问题，请参考以下文章