JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<form>
<input name="input" type="text"/>
<button type="submit">Submit</button>
</form>

JavaScript

$.validator.addMethod("xor", function(val, el, param) {
    var valid = false;

    // loop through sets of nested rules
    for(var i = 0; i < param.length; ++i) {
        var setResult = true;

        // loop through nested rules in the set
        for(var x in param[i]) {
            var result = $.validator.methods[x].call(this, val, el, param[i][x]);

            // If the input breaks one rule in a set we stop and move
            // to the next set...
            if(!result) {
                setResult = false;
                break;
            }
        }

        // If the value passes for one set we stop with a true result
        if(setResult == true) {
            valid = true;
            break;
        }
    }

    // Return the validation result
    return this.optional(el) || valid;
}, "The value entered is invalid");

$(function() {
    $("form").validate({
      rules: {
        input: {
          xor: [{
            digits: true,
            rangelength: [8, 8]
          }, {
            email: true
          }]
        }
      },
      messages: {
        input: {
          xor: "Please enter a valid email or phone number"
        }
      }
    });  
});