使用JavaScript验证下拉值

Question

我有一个注册表，用户必须选择然后附上他/她的身份证件/图片。 有主要的文档类型（例如：Passport，Driv。Lic等）以及辅助的和附加的。

每个文档类型都有一些积分值（例如Pass Pass：70积分），我想要某种Java脚本验证功能，在选择文档类型（下拉列表）时会检查所选文档类型的总价值是否至少为100积分，否则返回错误消息“您需要至少100点od ID”。

<div class="row setup-content" id="step-3">
                    <legend>100 Poins of ID</legend>

                    <div class="form-group">
                        <label class="control-label col-sm-4">Primary document:</label>
                        <div class="col-sm-8">
                            <select class="form-control" name="fileType1" id="fileType1">
                                <option value="">Select type of ID</option>
                                <option value="Birth Certificate (70 pts)">Birth Certificate (70 pts)</option>
                                <option value="Australian Passport (70 pts)">Australian Passport (70 pts)</option>
                                <option value="Australian Citizen Certificate (70 pts)">Australian Citizen Certificate (70 pts)</option>
                                <option value="Overseas Passport (70 pts)">Overseas Passport (70 pts)</option>
                            </select>
                            <br>
                            <input type="file" name="file1" id="file1" title="<i class='glyphicon glyphicon-paperclip'></i>&nbsp; Choose File (PDF, Image or MS Document)" data-filename-placement="inside" class="btn-info btn-block" accept="image/*, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4">Secondary document:</label>
                        <div class="col-sm-8">
                            <select class="form-control" name="fileType2" id="fileType2">
                                <option value="">Select type of ID</option>
                                <option value="AUS Govt. Issued Current Licence or Permit (40 pts)">AUS Govt. Issued Current Licence or Permit (40 pts)</option>
                                <option value="Working With Children/Teachers Registration Card (40 pts)">Working With Children/Teachers Registration Card (40 pts)</option>
                                <option value="Health Care Card (40 pts)">Health Care Card (40 pts)</option>
                                <option value="Current Tertiary Education Institution Photo ID (40 pts)">Current Tertiary Education Institution Photo ID (40 pts)</option>
                                <option value="Reference from a doctor (40 pts)">Reference from a doctor (40 pts)</option>
                                <option value="Foreign/International Driver’s Licence (25 pts)">Foreign/International Driver&#39s Licence (25 pts)</option>
                                <option value="Bank Statement (25 pts)">Bank Statement (25 pts)</option>
                                <option value="Phone/Utility Bill (25 pts)">Phone/Utility Bill (25 pts)</option>
                                <option value="Credit/Debit Card (25 pts)">Credit/Debit Card (25 pts)</option>
                                <option value="Medicare/Private Health Card (25 pts)">Medicare/Private Health Card (25 pts)</option>
                                <option value="Property Lease/Rental Agreement (25 pts)">Property Lease/Rental Agreement (25 pts)</option>
                                <option value="Tax Declaration (25 pts)">Tax Declaration (25 pts)</option>
                                <option value="Superannuation Statement (25 pts)">Superannuation Statement (25 pts)</option>
                            </select>
                            <br>
                            <input type="file" name="file2" id="file2" title="<i class='glyphicon glyphicon-paperclip'></i>&nbsp; Choose File (PDF, Image or MS Document)" data-filename-placement="inside" class="btn-info btn-block" accept="image/*, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4">Additional document (optional):</label>
                        <div class="col-sm-8">
                            <select class="form-control" name="fileType3" id="fileType3">
                                <option value="">Select type of ID</option>
                                <option value="AUS Govt. Issued Current Licence or Permit (25 pts)">AUS Govt. Issued Current Licence or Permit (25 pts)</option>
                                <option value="Working With Children/Teachers Registration Card (25 pts)">Working With Children/Teachers Registration Card (25 pts)</option>
                                <option value="Health Care Card (25 pts)">Health Care Card (25 pts)</option>
                                <option value="Current Tertiary Education Institution Photo ID (25 pts)">Current Tertiary Education Institution Photo ID (25 pts)</option>
                                <option value="Reference from a doctor (25 pts)">Reference from a doctor (25 pts)</option>
                                <option value="Foreign/International Driver’s Licence (25 pts)">Foreign/International Driver’s Licence (25 pts)</option>
                                <option value="Bank Statement (25 pts)">Bank Statement (25 pts)</option>
                                <option value="Phone/Utility Bill (25 pts)">Phone/Utility Bill (25 pts)</option>
                                <option value="Credit/Debit Card (25 pts)">Credit/Debit Card (25 pts)</option>
                                <option value="Medicare/Private Health Card (25 pts)">Medicare/Private Health Card (25 pts)</option>
                                <option value="Property Lease/Rental Agreement (25 pts)">Property Lease/Rental Agreement (25 pts)</option>
                                <option value="Tax Declaration (25 pts)">Tax Declaration (25 pts)</option>
                                <option value="Superannuation Statement (25 pts)">Superannuation Statement (25 pts)</option>
                            </select>
                            <br>
                            <input type="file" name="file3" title="<i class='glyphicon glyphicon-paperclip'></i>&nbsp; Choose File (PDF, Image or MS Document)" data-filename-placement="inside" class="btn-info btn-block" accept="image/*, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document">
                        </div>
                    </div>
                    <input type="hidden" name="spam" />
                    <button type="submit" id="submit-btn" name="register" class="btn btn-warning pull-right"><i class="glyphicon glyphicon-send"></i>&nbsp; Submit</button>
                </div> <!-- End Step 3 -->

Answer 1

如果这仅是客户端验证，则可能对您有用。

在选择的每个选项元素中添加一个data-points 。 例如<option data-points="45" value="Worth 45 points">Worth 45 points</option> 。

然后，您可以使用它来计算您拥有的总积分：

function calcPoints() {
    var points = 0;

    // Returns NodeList of selected options
    var selects = document.querySelectorAll("option:checked");

    // Convert to an Array
    selects = Array.prototype.slice.call(selects,0);

    selects.forEach(function(option) {
            points += Number(option.getAttribute('data-points'));
    })

    // Do something with the points variable
    console.log(points);
}

// Listen for click on the submit button
document.getElementById("submit-btn").addEventListener('click', calcPoints);

Answer 2

仅使用您提供的HTML来解决这个问题很有趣。

这是一个演示解决方案的小提琴链接 ：

如果在SO页上运行代码，请进入全页视图以更好地查看它。

 var totalPoints=0, primePoints=0, secondPoints=0, additionalPoints=0; $("#fileType1").change(function(){ $( "#fileType1 option:selected" ).each(function(){ var text = /\\d+/.exec($(this).text()); totalPoints-=primePoints; if (text===null) primePoints=0; else primePoints = parseInt(text[0]); totalPoints+=primePoints; $("#totalPoints").html(totalPoints); }); }); $("#fileType2").change(function(){ $( "#fileType2 option:selected" ).each(function(){ var text = /\\d+/.exec($(this).text()); totalPoints-=secondPoints; if (text===null) secondPoints=0; else secondPoints = parseInt(text[0]); totalPoints+=secondPoints; $("#totalPoints").html(totalPoints); }); }); $("#fileType3").change(function(){ $( "#fileType3 option:selected" ).each(function(){ var text = /\\d+/.exec($(this).text()); totalPoints-=additionalPoints; if (text===null) additionalPoints=0; else additionalPoints= parseInt(text[0]); totalPoints+=additionalPoints; $("#totalPoints").html(totalPoints); }); }); $("#submit-btn").click(function(){ if (totalPoints<70) alert("You have " + totalPoints + " but still need at least 100 points od ID"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="row setup-content" id="step-3"> <legend>100 Poins of ID</legend> <div class="form-group"> <label class="control-label col-sm-4">Primary document:</label> <div class="col-sm-8"> <select class="form-control" name="fileType1" id="fileType1"> <option value="">Select type of ID</option> <option value="Birth Certificate (70 pts)">Birth Certificate (70 pts)</option> <option value="Australian Passport (70 pts)">Australian Passport (70 pts)</option> <option value="Australian Citizen Certificate (70 pts)">Australian Citizen Certificate (70 pts)</option> <option value="Overseas Passport (70 pts)">Overseas Passport (70 pts)</option> </select> <br> <input type="file" name="file1" id="file1" title="<i class='glyphicon glyphicon-paperclip'></i>&nbsp; Choose File (PDF, Image or MS Document)" data-filename-placement="inside" class="btn-info btn-block" accept="image/*, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"> </div> </div> <div class="form-group"> <label class="control-label col-sm-4">Secondary document:</label> <div class="col-sm-8"> <select class="form-control" name="fileType2" id="fileType2"> <option value="">Select type of ID</option> <option value="AUS Govt. Issued Current Licence or Permit (40 pts)">AUS Govt. Issued Current Licence or Permit (40 pts)</option> <option value="Working With Children/Teachers Registration Card (40 pts)">Working With Children/Teachers Registration Card (40 pts)</option> <option value="Health Care Card (40 pts)">Health Care Card (40 pts)</option> <option value="Current Tertiary Education Institution Photo ID (40 pts)">Current Tertiary Education Institution Photo ID (40 pts)</option> <option value="Reference from a doctor (40 pts)">Reference from a doctor (40 pts)</option> <option value="Foreign/International Driver's Licence (25 pts)">Foreign/International Driver&#39s Licence (25 pts)</option> <option value="Bank Statement (25 pts)">Bank Statement (25 pts)</option> <option value="Phone/Utility Bill (25 pts)">Phone/Utility Bill (25 pts)</option> <option value="Credit/Debit Card (25 pts)">Credit/Debit Card (25 pts)</option> <option value="Medicare/Private Health Card (25 pts)">Medicare/Private Health Card (25 pts)</option> <option value="Property Lease/Rental Agreement (25 pts)">Property Lease/Rental Agreement (25 pts)</option> <option value="Tax Declaration (25 pts)">Tax Declaration (25 pts)</option> <option value="Superannuation Statement (25 pts)">Superannuation Statement (25 pts)</option> </select> <br> <input type="file" name="file2" id="file2" title="<i class='glyphicon glyphicon-paperclip'></i>&nbsp; Choose File (PDF, Image or MS Document)" data-filename-placement="inside" class="btn-info btn-block" accept="image/*, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"> </div> </div> <div class="form-group"> <label class="control-label col-sm-4">Additional document (optional):</label> <div class="col-sm-8"> <select class="form-control" name="fileType3" id="fileType3"> <option value="">Select type of ID</option> <option value="AUS Govt. Issued Current Licence or Permit (25 pts)">AUS Govt. Issued Current Licence or Permit (25 pts)</option> <option value="Working With Children/Teachers Registration Card (25 pts)">Working With Children/Teachers Registration Card (25 pts)</option> <option value="Health Care Card (25 pts)">Health Care Card (25 pts)</option> <option value="Current Tertiary Education Institution Photo ID (25 pts)">Current Tertiary Education Institution Photo ID (25 pts)</option> <option value="Reference from a doctor (25 pts)">Reference from a doctor (25 pts)</option> <option value="Foreign/International Driver's Licence (25 pts)">Foreign/International Driver's Licence (25 pts)</option> <option value="Bank Statement (25 pts)">Bank Statement (25 pts)</option> <option value="Phone/Utility Bill (25 pts)">Phone/Utility Bill (25 pts)</option> <option value="Credit/Debit Card (25 pts)">Credit/Debit Card (25 pts)</option> <option value="Medicare/Private Health Card (25 pts)">Medicare/Private Health Card (25 pts)</option> <option value="Property Lease/Rental Agreement (25 pts)">Property Lease/Rental Agreement (25 pts)</option> <option value="Tax Declaration (25 pts)">Tax Declaration (25 pts)</option> <option value="Superannuation Statement (25 pts)">Superannuation Statement (25 pts)</option> </select> <br> <input type="file" name="file3" title="<i class='glyphicon glyphicon-paperclip'></i>&nbsp; Choose File (PDF, Image or MS Document)" data-filename-placement="inside" class="btn-info btn-block" accept="image/*, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"> </div> </div> <div id="totalPoints"></div> <input type="hidden" name="spam" /> <button type="submit" id="submit-btn" name="register" class="btn btn-warning pull-right"><i class="glyphicon glyphicon-send"></i>&nbsp; Submit</button> </div> <!-- End Step 3 -->