如何根据选择的选项值验证表单输入字段？

Question

我在下拉字段上使用jQuery验证，基于选定的选项，我必须验证下一个输入字段，即，如果我选择了pan card，则在下一个字段中允许使用字母数字字符。 为此，我正在使用正则表达式。 然后在选择Adhar卡时，仅在下一个输入字段中允许使用数字值。 我想在用户单击下拉选项后对其进行验证。 我试过了，但是代码不起作用。 请检查我的代码出了错。

 $('#idproof').change(function() { var selection = $(this).val(); if (selection == 'pan') { var val = document.registration.idnumber; var numbers = /^[0-9]+$/; if (val.value.match(numbers)) { document.registration.zip.focus(); return true; } else { $('#error').empty(); $('#error').append('pan number must have numeric characters only'); val.focus(); return false; } } else if (selection == 'Adhar') { var adhar = document.registration.idnumber; var letters = /^[0-9a-zA-Z]+$/; if (val.value.match(letters)) { document.registration.zip.focus(); return true; } else { $('#error').empty(); $('#error').append('Adhar number must have alphanumeric characters only'); val.focus(); return false; } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div id="error"></div> <form id="reg" name="registration"> <ul> <li>IdProof: <select id="idproof"> <option value="Default">Please select a id type</option> <option value="pan">pancard</option> <option value="Adhar">AdharCard</option> </select> </li> <li>Id Number: <input type="text" id="idnumber" /> </li> </ul> </form> 

Answer 1

您的代码存在的问题是未定义变量，因此引发了错误。 我已修复此问题，并进行了其他一些更改。

我认为您最好在更改两个输入中的一个时显示错误，并在两个更改事件之间共享功能。 另外，您可能应该在显示消息之前检查输入是否为空（我尚未在其中添加）。

 var checkValidation = function() { $('#error').empty(); var selection = $('#idproof').val(); var val = document.registration.idnumber; if (val.value || val.value === 0) { if (selection === 'pan') { var numbers = /^[0-9]+$/; if (val.value.match(numbers)) { // document.registration.zip.focus(); return true; } else { $('#error').append('pan number must have numeric characters only'); val.focus(); return false; } } else if (selection === 'Adhar') { var letters = /^[0-9a-zA-Z]+$/; if (val.value.match(letters)) { // document.registration.zip.focus(); return true; } else { $('#error').append('Adhar number must have alphanumeric characters only'); val.focus(); return false; } } } }; $('#idnumber').change(checkValidation); $('#idproof').change(checkValidation); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div id="error"></div> <form id="reg" name="registration"> <ul> <li>IdProof: <select id="idproof"> <option value="Default">Please select a id type</option> <option value="pan">pancard</option> <option value="Adhar">AdharCard</option> </select> </li> <li>Id Number: <input type="text" id="idnumber" /> </li> </ul> </form>