The Acorn Spirit’s Journey

jquery.validate.jsを使用。カスタムルールを作成する。

◆ひらがなのみ

$.validator.addMethod("hiragana", function(value, element) {
    var hiraganaPattern = /^[\u3040-\u309F]+$/;
    return this.optional(element) || hiraganaPattern.test(value);
}, "ひらがなで入力してください");

　

◆カタカナのみ

$.validator.addMethod("katakana", function(value, element) {
    var katakanaPattern = /^[\u30A0-\u30FF\s]+$/;
    return this.optional(element) || katakanaPattern.test(value);
  }, "カタカナで入力してください");

　

◆日本語のみ

$.validator.addMethod("japanese", function(value, element) {
    var japanesePattern = /^[\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Han}\u30fc\u3000-\u303f]+$/u;
    return this.optional(element) || japanesePattern.test(value);
  }, "日本語で入力してください");

　

◆英数字のみ

$.validator.addMethod("alphaNum", function (value, element) {
    var alphaNumPattern = /^([a-zA-Z0-9]+)$/;
    return this.optional(element) || alphaNumPattern.test(value);
  }, "英数字で入力してください");

　

◆英字のみ

$.validator.addMethod("alpha", function (value, element) {
    var alphaPattern = /^([a-zA-Z]+)$/;
    return this.optional(element) || alphaPattern.test(value);
  }, "英字で入力してください");

　

◆桁数指定

$.validator.addMethod("tenDigits", function (value, element) {
    var tenDigitsPattern = /^\d{10}$/;
    return this.optional(element) || tenDigitsPattern.test(value);
  }, "10桁で入力してください");

　

◆数字のみ

$.validator.addMethod("numeric", function(value, element) {
    var numericPattern = /^([0-9]+)$/;
    return this.optional(element) || numericPattern.test(value);
  }, "数字で入力してください");

　

◆半角カタカナ、英数字、特定の記号指定

$.validator.addMethod("katakanaAlphaNumLimitedSymbol", function(value, element) {
    var kANLSymbolpattern = /^([ｦ-ﾟa-zA-Z0-9()./-\s]+)$/;
    return this.optional(element) || kANLSymbolpattern.test(value);
  }, "半角カタカナ、英数字、() . / - のみで入力してください");

　

◎具体例◎

$(document).ready(function() {
  // カスタムルールを定義
  $.validator.addMethod("numeric", function(value, element) {
    var numericPattern = /^([0-9]+)$/;
    return this.optional(element) || numericPattern.test(value);
  }, "数字で入力してください");

  //
  $("#formdesu").validate({
    rules: {
      fieldname: {
        required: true,
        numeric: true
      }
    },
    messages: {
      fieldname: {
        required: '入力してください'
      }
    },
  });
});