我有一个注册表，用户必须选择并附上他/她的身份证件/照片。主要文件类型（例如：Passport，Driv.Lic等）以及辅助和附加文件类型。
每个文档类型都有一些点值（ex Passport：70 Points），我想要一些Javascript验证的东西，在选择Document Type（下拉列表）时检查所选文档类型的总值是否至少为100分，否则返回错误信息那个＆＃34;你需要至少100分的ID＆＃34;。
<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> 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'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="file2" id="file2" title="<i class='glyphicon glyphicon-paperclip'></i> 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> 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> Submit</button>
</div> <!-- End Step 3 -->
答案 0 :(得分：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);
答案 1 :(得分：1)
只需使用您提供的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> 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'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="file2" id="file2" title="<i class='glyphicon glyphicon-paperclip'></i> 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> 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> Submit</button>
</div> <!-- End Step 3 -->