审查视图

public/assets/libs/nice-validator/demo/required-by-condition.html 1.4 KB
郭盛 authored
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Required By Condition</title>
    <link rel="stylesheet" href="demo.css">

    <script src="https://cdn.jsdelivr.net/jquery/1.12.3/jquery.min.js"></script>
    <script src="../dist/jquery.validator.min.js?local=en"></script>
</head>

<body>

<form id="form1" class="form" data-validator-option="{timely:3,focusCleanup:true}">
    <h3>required( dependency-expression )</h3>
    <div class="form-item">
        <label for="isCompany"><input type="checkbox" id="isCompany" checked>Company</label>
    </div>
    <div class="form-item">
        <input type="text" name="companyName" data-rule="required(#isCompany:checked)">
    </div>
    <div class="form-item">
        <button type="submit">Submit</button>
    </div>
</form>

<form id="form2" class="form">
    <h3>required( dependency-callback )</h3>
    <div class="form-item">
        <label><input type="checkbox" id="isPersonal" checked>Personal</label>
    </div>
    <div class="form-item">
        <input type="text" name="email">
    </div>
    <div class="form-item">
        <button type="submit">Submit</button>
    </div>
</form>

<script>
$('#form2').validator({
    timely: 3,
    focusCleanup: true,
    rules: {
        isPersonal: function() {
            return $('#isPersonal').prop('checked');
        }
    },
    fields: {
        email: 'required(isPersonal); email'
    }
});
</script>

</body>
</html>