如何根據選擇的選項值驗證表單輸入字段？

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>