删除属性以使用 JavaScript 进行验证
Posted
技术标签:
【中文标题】删除属性以使用 JavaScript 进行验证【英文标题】：Delete attributes for validation with javaScript 【发布时间】：2019-05-12 05:03:58 【问题描述】：我正在创建一个函数来在输入的邮政编码上添加regex。
我只为某些国家添加他的正则表达式，例如法国。
当我通过选择选择国家时，我已经完成的功能将其回调， 这在我将属性添加到输入时有效， 相反，它不起作用， 如果以后我想更改国家，请选择一个我不能检查邮政编码的国家。
浏览器继续进行验证以向我返回错误 验证“Le champ doit contenir 5 chiffres”。
如何修改 javascript 以取消添加的属性？
谢谢
function CodePostalRegEx(input, action)
if (action == "add")
$(input).attr('data-val', 'true'); // turn on validation
$(input).attr('data-val-regex', 'Le champ doit contenir 5 chiffres'); // message to show when validation fails
$(input).attr('data-val-regex-pattern', "^(([0-8][0-9])|(9[0-5]))[0-9]3$"); //regex
else
$(input).attr('data-val', 'false');
$(input).removeAttr('data-val-regex'); // message to show when validation fails
$(input).removeAttr('data-val-regex-pattern'); //regex
$(input).removeData('unobtrusiveValidation');
$(input).removeData('validator');
$("#MonProfilForm").each(function()
$.data($(this)[0], 'validator', false);
);
$.validator.unobtrusive.parse("#MonProfilForm");
$(".Identite #PaysNaissance").change(function ()
if ($(".Identite #PaysNaissance").val().toLowerCase() != "france")
CodePostalRegEx(".Identite #CodePostalNaissance", "remove");
$(".Identite #CodePostalNaissance").unmask("data-mask");
if ($(".Identite #CommuneNaissance").hasClass('ui-autocomplete-input'))
$(".Identite #CommuneNaissance").autocomplete("destroy");
$(".Identite #CommuneNaissance").removeData('autocomplete');
if ($(".Identite #CodePostalNaissance").hasClass('ui-autocomplete-input'))
$(".Identite #CodePostalNaissance").autocomplete("destroy");
$(".Identite #CodePostalNaissance").removeData('autocomplete');
else
$(".Identite #CodePostalNaissance").mask("00000");
CodePostalRegEx(".Identite #CodePostalNaissance", "add");
setupAC()
)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/Moi" class="" id="MonProfilForm" method="post" role="form" novalidate="novalidate">
<div class="form-group label-floating has-success-website">
<label class="control-label" for="ClientModel_EtatCivil_PaysNaissance">Pays de naissance</label>
<select class="form-control valid" for="pp8" id="PaysNaissance" name="ClientModel.EtatCivil.PaysNaissance" aria-invalid="false">
<option value=""></option>
<option value="EX-REP YOUGOSLAVE DE MACEDOINE">EX-REP YOUGOSLAVE DE MACEDOINE</option>
<option selected="selected" value="FIDJI">FIDJI</option>
<option value="FINLANDE">FINLANDE</option>
<option value="FRANCE">FRANCE</option>
<option value="GABON">GABON</option>
<option value="GAMBIE">GAMBIE</option>
<option value="GEORGIE">GEORGIE</option>
<option value="GEORGIE DU SUD ET LES ILES SANDWICH DU SUD">GEORGIE DU SUD ET LES ILES SANDWICH DU SUD</option>
<option value="GHANA">GHANA</option>
</select>
<span class="field-validation-valid text-danger help-block" data-valmsg-for="ClientModel.EtatCivil.PaysNaissance" data-valmsg-replace="true" id="pp8"></span>
</div>
<div class="row">
<div class="col-xs-12 col-md-5">
<div class="form-group label-floating has-success-website">
<label class="control-label" for="ClientModel_EtatCivil_CodePostalNaissance">Code postal de naissance</label>
<input class="form-control ui-autocomplete-input valid" for="pp6" id="CodePostalNaissance" name="ClientModel.EtatCivil.CodePostalNaissance" type="text" value="3440" autocomplete="off" aria-invalid="false">
<span class="field-validation-valid text-danger help-block" data-valmsg-for="ClientModel.EtatCivil.CodePostalNaissance" data-valmsg-replace="true" id="pp6"></span>
</div>
</div>
<div class="col-xs-12 col-md-7">
<div class="form-group label-floating is-empty">
<label class="control-label" for="ClientModel_EtatCivil_CommuneNaissance">Commune de naissance</label>
<input class="form-control" id="CommuneNaissance2" name="ClientModel.EtatCivil.CommuneNaissance" type="text" value="" style="display: inline-block;">
<input class="form-control ui-autocomplete-input" id="CommuneNaissance" name="ClientModel.EtatCivil.CommuneNaissance" type="text" value="" autocomplete="off" style="display: none;">
<span class="field-validation-valid text-danger help-block" data-valmsg-for="ClientModel.EtatCivil.CommuneNaissance" data-valmsg-replace="true" id="pp7"></span>
</div>
</div>
</div>
<div class="content-container-detail-footer text-center content-container-detail-footer-fixed-bottom col-lg-12">
<button class="flat-butt flat-primary-butt flat-butt-responsive" type="submit" name="action:Save">
<span class="">Enregistrer</span>
</button>
<button class="flat-butt flat-primary-send flat-butt-responsive" type="submit" name="action:AskSend">
<span class="visible-xs-inline">Envoyer</span>
<span class="hidden-xs">Envoyer à mon notaire</span>
</button>
</div>
</form>【问题讨论】：
发布你的html @ewwink 我已经添加了我的表单 html 的一部分 函数CodePostalRegEx()是怎么调用的？请在您的问题中也添加它
【参考方案1】：
你有一些带有类的选择器，然后是 id。您只需要 id 因为它必须是唯一的并且它是最快的选择器。我还修改为使用所选元素的缓存，从而使代码更简单，并且不会使用选择器（不遍历）来访问 DOM 我通过添加的空缺失函数避免了错误。 setupAC
我还添加了这一行：jqinput.data('valRegexPattern', reg); 请注意按照标准删除了破折号和驼峰式大小写。
这段代码看起来很奇怪，你的意思是处理表单还是表单中的输入？无论哪种方式，这似乎都是错误的：
$("#MonProfilForm").each(function()
$.data($(this)[0], 'validator', false);
);
因此，鉴于您需要以下其中一项：
形式：
$("#MonProfilForm").data('validator', false);
输入
$("#MonProfilForm").find('input').each(function()
$.data($(this)[0], 'validator', false);
);
function CodePostalRegEx(jqinput, action)
var reg = "^(([0-8][0-9])|(9[0-5]))[0-9]3$";
if (action == "add")
jqinput.attr('data-val', 'true'); // turn on validation
jqinput.attr('data-val-regex', 'Le champ doit contenir 5 chiffres'); // message to show when validation fails
jqinput.attr('data-val-regex-pattern', reg); //regex
jqinput.data('valRegexPattern', reg);
else
jqinput.attr('data-val', 'false');
jqinput.removeAttr('data-val-regex'); // message to show when validation fails
jqinput.removeAttr('data-val-regex-pattern'); //regex
jqinput.removeData('unobtrusiveValidation');
jqinput.removeData('validator');
$("#MonProfilForm").each(function()
$.data($(this)[0], 'validator', false);
);
$.validator.unobtrusive.parse("#MonProfilForm");
function setupAC()
$("#PaysNaissance").change(function()
var cpn = $("#CodePostalNaissance");
var cn = $("#CommuneNaissance");
if ($(this).val().toLowerCase() != "france")
CodePostalRegEx(cpn, "remove");
cpn.unmask("data-mask");
if (cn.hasClass('ui-autocomplete-input'))
cn.autocomplete("destroy");
cn.removeData('autocomplete');
if (cpn.hasClass('ui-autocomplete-input'))
cpn.autocomplete("destroy");
cpn.removeData('autocomplete');
else
cpn.mask("00000");
CodePostalRegEx(cpn, "add");
setupAC();
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"></script>
<form action="/Moi" class="" id="MonProfilForm" method="post" role="form" novalidate="novalidate">
<div class="form-group label-floating has-success-website">
<label class="control-label" for="ClientModel_EtatCivil_PaysNaissance">Pays de naissance</label>
<select class="form-control valid" for="pp8" id="PaysNaissance" name="ClientModel.EtatCivil.PaysNaissance" aria-invalid="false">
<option value=""></option>
<option value="EX-REP YOUGOSLAVE DE MACEDOINE">EX-REP YOUGOSLAVE DE MACEDOINE</option>
<option selected="selected" value="FIDJI">FIDJI</option>
<option value="FINLANDE">FINLANDE</option>
<option value="FRANCE">FRANCE</option>
<option value="GABON">GABON</option>
<option value="GAMBIE">GAMBIE</option>
<option value="GEORGIE">GEORGIE</option>
<option value="GEORGIE DU SUD ET LES ILES SANDWICH DU SUD">GEORGIE DU SUD ET LES ILES SANDWICH DU SUD</option>
<option value="GHANA">GHANA</option>
</select>
<span class="field-validation-valid text-danger help-block" data-valmsg-for="ClientModel.EtatCivil.PaysNaissance" data-valmsg-replace="true" id="pp8"></span>
</div>
<div class="row">
<div class="col-xs-12 col-md-5">
<div class="form-group label-floating has-success-website">
<label class="control-label" for="ClientModel_EtatCivil_CodePostalNaissance">Code postal de naissance</label>
<input class="form-control ui-autocomplete-input valid" for="pp6" id="CodePostalNaissance" name="ClientModel.EtatCivil.CodePostalNaissance" type="text" value="3440" autocomplete="off" aria-invalid="false">
<span class="field-validation-valid text-danger help-block" data-valmsg-for="ClientModel.EtatCivil.CodePostalNaissance" data-valmsg-replace="true" id="pp6"></span>
</div>
</div>
<div class="col-xs-12 col-md-7">
<div class="form-group label-floating is-empty">
<label class="control-label" for="ClientModel_EtatCivil_CommuneNaissance">Commune de naissance</label>
<input class="form-control" id="CommuneNaissance2" name="ClientModel.EtatCivil.CommuneNaissance" type="text" value="" style="display: inline-block;">
<input class="form-control ui-autocomplete-input" id="CommuneNaissance" name="ClientModel.EtatCivil.CommuneNaissance" type="text" value="" autocomplete="off" style="display: none;">
<span class="field-validation-valid text-danger help-block" data-valmsg-for="ClientModel.EtatCivil.CommuneNaissance" data-valmsg-replace="true" id="pp7"></span>
</div>
</div>
</div>
<div class="content-container-detail-footer text-center content-container-detail-footer-fixed-bottom col-lg-12">
<button class="flat-butt flat-primary-butt flat-butt-responsive" type="submit" name="action:Save">
<span class="">Enregistrer</span>
</button>
<button class="flat-butt flat-primary-send flat-butt-responsive" type="submit" name="action:AskSend">
<span class="visible-xs-inline">Envoyer</span>
<span class="hidden-xs">Envoyer à mon notaire</span>
</button>
</div>
</form>【讨论】：
以上是关于删除属性以使用 JavaScript 进行验证的主要内容，如果未能解决你的问题，请参考以下文章
使用 javascript 和 PHP 验证每个类元素，然后从下一步按钮中删除禁用的类
如何使用 javascript 从 Firebase 电话身份验证中删除验证码？