<div class="container">
  <h1>validate.js 台灣手機號碼認證範例</h1>
  <form id="myform">

    <div class="form-group">
      <label for="exampleInputEmail1">手機號碼</label>
      <input type="text" class="form-control" id="phone" placeholder="phone" name="phone">
    </div>
    <ol>
      <li>
        <input type="radio" id="ios" name="os" value="ios" />
        <label for="ios" class="text">
          <span>iOS</span>
        </label>
      </li>
      <li>
        <input type="radio" id="android" name="os" value="android" />
        <label for="android" class="text">
          <span>Android</span>
         
        </label>
      </li>
    </ol>
    <button type="submit" class="btn btn-primary">送出</button>
  </form>
</div>
</body>
@media(min-width: 960px) { 
  .container {
    width: 450px;
    margin: 0 auto;
  }
}
.container h1 {
  margin: 20px;
  text-align: center;
}
.container form {
  padding: 20px;
  background: #EBF0F4;
  border-radius: 10px;
}
.error{
  color:#dc3545;
}
label.error{
  padding-top:5px;
}
jQuery.validator.methods.matches = function (value, element, params) {
    var re = new RegExp(params);
    return this.optional(element) || re.test(value);
  };
var re = new RegExp("^09\\d{8}$");
$( "#myform" ).validate({
  rules: {
    phone: {
      required: true,
      matches: re, // <-- no such method called "matches"!
    },
    os: {
      required: true,
    }
  },
  messages: {
    phone: {
      required: "請填寫您的手機號碼",
      matches: "您的手機號碼格式錯誤,需為10位的正確數字手機格式",
    },
     os: {
      required: "請填寫您的手機系統",
    },
  },
  submitHandler: function (form) {
    alert('成功送出!');
  }
});

External CSS

  1. https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
  2. https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js