LoginSignup
9
9

More than 5 years have passed since last update.

jQuery-Validation-Engineを用いて「機種依存文字」の入力チェックを行う

Posted at

初投稿です。jQuery-Validation-Engineを用いた「機種依存文字」のチェックを行いましたので、共有いたします。

そもそも「jQuery-Validation-Engine」とは

会員登録フォームなどで入力チェック(バリデーション)を行うjQueryプラグインです。
こちらの記事に詳細が書かれておりましたので、詳しくはこちらをご参照ください。

jQuery Validation Engineを利用する - Qiita:https://qiita.com/Lui/items/4154161d511026730dc5

 「機種依存文字」のチェック

「機種依存文字」の定義

ここでは、機種依存文字を次のように定義しました。
本来はスマホの絵文字なども対象にするべきでしょうが、流石にユーザーも絵文字を入力すると気付くと思いますので、
あくまで「気が付きにくい機種依存文字(バリデーションがあった方が良い)」と判断したものを取り上げています。

①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑯⑰⑱⑲⑳ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩ㍉㌔㌢㍍㌘㌧㌃㌶㍑㍗㌍㌦㌣㌫㍊㌻㎜㎝㎞㎎㎏㏄㎡㍻〝〟№㏍℡㊤㊥㊦㊧㊨㈱㈲㈹㍾㍽㍼∮∟⊿纊褜鍈銈蓜俉炻昱棈鋹曻彅丨仡仼伀伃伹佖侒侊侚侔俍偀倢俿倞偆偰偂傔僴僘兊兤冝冾凬刕劜劦勀勛匀匇匤卲厓厲叝﨎咜咊咩哿喆坙坥垬埈埇﨏塚增墲夋奓奛奝奣妤妺孖寀甯寘寬尞岦岺峵崧嵓﨑嵂嵭嶸嶹巐弡弴彧德忞恝悅悊惞惕愠惲愑愷愰憘戓抦揵摠撝擎敎昀昕昻昉昮昞昤晥晗晙晴晳暙暠暲暿曺朎朗杦枻桒柀栁桄棏﨓楨﨔榘槢樰橫橆橳橾櫢櫤毖氿汜沆汯泚洄涇浯涖涬淏淸淲淼渹湜渧渼溿澈澵濵瀅瀇瀨炅炫焏焄煜煆煇凞燁燾犱犾猤猪獷玽珉珖珣珒琇珵琦琪琩琮瑢璉璟甁畯皂皜皞皛皦益睆劯砡硎硤礰礼神祥禔福禛竑竧靖竫箞精絈絜綷綠緖繒罇羡羽茁荢荿菇菶葈蒴蕓蕙蕫﨟薰?﨡蠇裵訒訷詹誧誾諟諸諶譓譿賰賴贒赶﨣軏﨤逸遧郞都鄕鄧釚釗釞釭釮釤釥鈆鈐鈊鈺鉀鈼鉎鉙鉑鈹鉧銧鉷鉸鋧鋗鋙鋐﨧鋕鋠鋓錥錡鋻﨨錞鋿錝錂鍰鍗鎤鏆鏞鏸鐱鑅鑈閒隆﨩隝隯霳霻靃靍靏靑靕顗顥飼餧館馞驎髙髜魵魲鮏鮱鮻鰀鵰鵫鶴鸙黑ⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹ¬¦

「機種依存文字」を「|」で区切り、Unicode形式に変換する

上記の「機種依存文字」をそのまま「jQuery-Validation-Engine」のJSに突っ込んでも正常に正規表現でマッチしないため、先に「|」で区切っておいて、「機種依存文字」をUnicode形式に変換します。

Unicode形式に変換してくれるツール例→Unicode Escape Sequence:http://www.kwonline.org/u_esc_seq.php

区切り文字を入れ、Unicode形式に変換すると、次のような文字列になります。

\u2460|\u2461|\u2462|\u2463|\u2464|\u2465|\u2466|\u2467|\u2468|\u2469|\u246a|\u246b|\u246c|\u246d|\u246f|\u2470|\u2471|\u2472|\u2473|\u2160|\u2161|\u2162|\u2163|\u2164|\u2165|\u2166|\u2167|\u2168|\u2169|\u3349|\u3314|\u3322|\u334d|\u3318|\u3327|\u3303|\u3336|\u3351|\u3357|\u330d|\u3326|\u3323|\u332b|\u334a|\u333b|\u339c|\u339d|\u339e|\u338e|\u338f|\u33c4|\u33a1|\u337b|\u301d|\u301f|\u2116|\u33cd|\u2121|\u32a4|\u32a5|\u32a6|\u32a7|\u32a8|\u3231|\u3232|\u3239|\u337e|\u337d|\u337c|\u222e|\u221f|\u22bf|\u7e8a|\u891c|\u9348|\u9288|\u84dc|\u4fc9|\u70bb|\u6631|\u68c8|\u92f9|\u66fb|\u5f45|\u4e28|\u4ee1|\u4efc|\u4f00|\u4f03|\u4f39|\u4f56|\u4f92|\u4f8a|\u4f9a|\u4f94|\u4fcd|\u5040|\u5022|\u4fff|\u501e|\u5046|\u5070|\u5042|\u5094|\u50f4|\u50d8|\u514a|\u5164|\u519d|\u51be|\u51ec|\u5215|\u529c|\u52a6|\u52c0|\u52db|\u5300|\u5307|\u5324|\u5372|\u5393|\u53b2|\u53dd|\ufa0e|\u549c|\u548a|\u54a9|\u54ff|\u5586|\u5759|\u5765|\u57ac|\u57c8|\u57c7|\ufa0f|\u585a|\u589e|\u58b2|\u590b|\u5953|\u595b|\u595d|\u5963|\u59a4|\u59ba|\u5b56|\u5bc0|\u752f|\u5bd8|\u5bec|\u5c1e|\u5ca6|\u5cba|\u5cf5|\u5d27|\u5d53|\ufa11|\u5d42|\u5d6d|\u5db8|\u5db9|\u5dd0|\u5f21|\u5f34|\u5f67|\u5fb7|\u5fde|\u605d|\u6085|\u608a|\u60de|\u60d5|\u6120|\u60f2|\u6111|\u6137|\u6130|\u6198|\u6213|\u62a6|\u63f5|\u6460|\u649d|\u64ce|\u654e|\u6600|\u6615|\u663b|\u6609|\u662e|\u661e|\u6624|\u6665|\u6657|\u6659|\u6674|\u6673|\u6699|\u66a0|\u66b2|\u66bf|\u66fa|\u670e|\u6717|\u6766|\u67bb|\u6852|\u67c0|\u6801|\u6844|\u68cf|\ufa13|\u6968|\ufa14|\u6998|\u69e2|\u6a30|\u6a6b|\u6a46|\u6a73|\u6a7e|\u6ae2|\u6ae4|\u6bd6|\u6c3f|\u6c5c|\u6c86|\u6c6f|\u6cda|\u6d04|\u6d87|\u6d6f|\u6d96|\u6dac|\u6dcf|\u6df8|\u6df2|\u6dfc|\u6e39|\u6e5c|\u6e27|\u6e3c|\u6ebf|\u6f88|\u6fb5|\u6ff5|\u7005|\u7007|\u7028|\u7085|\u70ab|\u710f|\u7104|\u715c|\u7146|\u7147|\u51de|\u71c1|\u71fe|\u72b1|\u72be|\u7324|\u732a|\u7377|\u73bd|\u73c9|\u73d6|\u73e3|\u73d2|\u7407|\u73f5|\u7426|\u742a|\u7429|\u742e|\u7462|\u7489|\u749f|\u7501|\u756f|\u7682|\u769c|\u769e|\u769b|\u76a6|\u76ca|\u7746|\u52af|\u7821|\u784e|\u7864|\u7930|\u793c|\u795e|\u7965|\u7994|\u798f|\u799b|\u7ad1|\u7ae7|\u9756|\u7aeb|\u7b9e|\u7cbe|\u7d48|\u7d5c|\u7db7|\u7da0|\u7dd6|\u7e52|\u7f47|\u7fa1|\u7fbd|\u8301|\u8362|\u837f|\u83c7|\u83f6|\u8448|\u84b4|\u8553|\u8559|\u856b|\ufa1f|\u85b0|\u8612|\ufa21|\u8807|\u88f5|\u8a12|\u8a37|\u8a79|\u8aa7|\u8abe|\u8adf|\u8af8|\u8af6|\u8b53|\u8b7f|\u8cf0|\u8cf4|\u8d12|\u8d76|\ufa23|\u8ecf|\ufa24|\u9038|\u9067|\u90de|\u90fd|\u9115|\u9127|\u91da|\u91d7|\u91de|\u91ed|\u91ee|\u91e4|\u91e5|\u9206|\u9210|\u920a|\u923a|\u9240|\u923c|\u924e|\u9259|\u9251|\u9239|\u9267|\u92a7|\u9277|\u9278|\u92e7|\u92d7|\u92d9|\u92d0|\ufa27|\u92d5|\u92e0|\u92d3|\u9325|\u9321|\u92fb|\ufa28|\u931e|\u92ff|\u931d|\u9302|\u9370|\u9357|\u93a4|\u93c6|\u93de|\u93f8|\u9431|\u9445|\u9448|\u9592|\u9686|\ufa29|\u969d|\u96af|\u9733|\u973b|\u9743|\u974d|\u974f|\u9751|\u9755|\u9857|\u9865|\u98fc|\u9927|\u9928|\u999e|\u9a4e|\u9ad9|\u9adc|\u9b75|\u9b72|\u9b8f|\u9bb1|\u9bbb|\u9c00|\u9d70|\u9d6b|\u9db4|\u9e19|\u9ed1|\u2170|\u2171|\u2172|\u2173|\u2174|\u2175|\u2176|\u2177|\u2178|\u2179|\uffe2|\uffe4

jquery.validationEngine-ja.jsへの追記

次の「pdc(platform dependent characters)」というパラメータを追記します。

jquery.validationEngine-ja.js
"pdc": {
  //機種依存文字
  "regex": /^(?!.*(\u2460|\u2461|\u2462|\u2463|\u2464|\u2465|\u2466|\u2467|\u2468|\u2469|\u246a|\u246b|\u246c|\u246d|\u246f|\u2470|\u2471|\u2472|\u2473|\u2160|\u2161|\u2162|\u2163|\u2164|\u2165|\u2166|\u2167|\u2168|\u2169|\u3349|\u3314|\u3322|\u334d|\u3318|\u3327|\u3303|\u3336|\u3351|\u3357|\u330d|\u3326|\u3323|\u332b|\u334a|\u333b|\u339c|\u339d|\u339e|\u338e|\u338f|\u33c4|\u33a1|\u337b|\u301d|\u301f|\u2116|\u33cd|\u2121|\u32a4|\u32a5|\u32a6|\u32a7|\u32a8|\u3231|\u3232|\u3239|\u337e|\u337d|\u337c|\u222e|\u221f|\u22bf|\u7e8a|\u891c|\u9348|\u9288|\u84dc|\u4fc9|\u70bb|\u6631|\u68c8|\u92f9|\u66fb|\u5f45|\u4e28|\u4ee1|\u4efc|\u4f00|\u4f03|\u4f39|\u4f56|\u4f92|\u4f8a|\u4f9a|\u4f94|\u4fcd|\u5040|\u5022|\u4fff|\u501e|\u5046|\u5070|\u5042|\u5094|\u50f4|\u50d8|\u514a|\u5164|\u519d|\u51be|\u51ec|\u5215|\u529c|\u52a6|\u52c0|\u52db|\u5300|\u5307|\u5324|\u5372|\u5393|\u53b2|\u53dd|\ufa0e|\u549c|\u548a|\u54a9|\u54ff|\u5586|\u5759|\u5765|\u57ac|\u57c8|\u57c7|\ufa0f|\u585a|\u589e|\u58b2|\u590b|\u5953|\u595b|\u595d|\u5963|\u59a4|\u59ba|\u5b56|\u5bc0|\u752f|\u5bd8|\u5bec|\u5c1e|\u5ca6|\u5cba|\u5cf5|\u5d27|\u5d53|\ufa11|\u5d42|\u5d6d|\u5db8|\u5db9|\u5dd0|\u5f21|\u5f34|\u5f67|\u5fb7|\u5fde|\u605d|\u6085|\u608a|\u60de|\u60d5|\u6120|\u60f2|\u6111|\u6137|\u6130|\u6198|\u6213|\u62a6|\u63f5|\u6460|\u649d|\u64ce|\u654e|\u6600|\u6615|\u663b|\u6609|\u662e|\u661e|\u6624|\u6665|\u6657|\u6659|\u6674|\u6673|\u6699|\u66a0|\u66b2|\u66bf|\u66fa|\u670e|\u6717|\u6766|\u67bb|\u6852|\u67c0|\u6801|\u6844|\u68cf|\ufa13|\u6968|\ufa14|\u6998|\u69e2|\u6a30|\u6a6b|\u6a46|\u6a73|\u6a7e|\u6ae2|\u6ae4|\u6bd6|\u6c3f|\u6c5c|\u6c86|\u6c6f|\u6cda|\u6d04|\u6d87|\u6d6f|\u6d96|\u6dac|\u6dcf|\u6df8|\u6df2|\u6dfc|\u6e39|\u6e5c|\u6e27|\u6e3c|\u6ebf|\u6f88|\u6fb5|\u6ff5|\u7005|\u7007|\u7028|\u7085|\u70ab|\u710f|\u7104|\u715c|\u7146|\u7147|\u51de|\u71c1|\u71fe|\u72b1|\u72be|\u7324|\u732a|\u7377|\u73bd|\u73c9|\u73d6|\u73e3|\u73d2|\u7407|\u73f5|\u7426|\u742a|\u7429|\u742e|\u7462|\u7489|\u749f|\u7501|\u756f|\u7682|\u769c|\u769e|\u769b|\u76a6|\u76ca|\u7746|\u52af|\u7821|\u784e|\u7864|\u7930|\u793c|\u795e|\u7965|\u7994|\u798f|\u799b|\u7ad1|\u7ae7|\u9756|\u7aeb|\u7b9e|\u7cbe|\u7d48|\u7d5c|\u7db7|\u7da0|\u7dd6|\u7e52|\u7f47|\u7fa1|\u7fbd|\u8301|\u8362|\u837f|\u83c7|\u83f6|\u8448|\u84b4|\u8553|\u8559|\u856b|\ufa1f|\u85b0|\u8612|\ufa21|\u8807|\u88f5|\u8a12|\u8a37|\u8a79|\u8aa7|\u8abe|\u8adf|\u8af8|\u8af6|\u8b53|\u8b7f|\u8cf0|\u8cf4|\u8d12|\u8d76|\ufa23|\u8ecf|\ufa24|\u9038|\u9067|\u90de|\u90fd|\u9115|\u9127|\u91da|\u91d7|\u91de|\u91ed|\u91ee|\u91e4|\u91e5|\u9206|\u9210|\u920a|\u923a|\u9240|\u923c|\u924e|\u9259|\u9251|\u9239|\u9267|\u92a7|\u9277|\u9278|\u92e7|\u92d7|\u92d9|\u92d0|\ufa27|\u92d5|\u92e0|\u92d3|\u9325|\u9321|\u92fb|\ufa28|\u931e|\u92ff|\u931d|\u9302|\u9370|\u9357|\u93a4|\u93c6|\u93de|\u93f8|\u9431|\u9445|\u9448|\u9592|\u9686|\ufa29|\u969d|\u96af|\u9733|\u973b|\u9743|\u974d|\u974f|\u9751|\u9755|\u9857|\u9865|\u98fc|\u9927|\u9928|\u999e|\u9a4e|\u9ad9|\u9adc|\u9b75|\u9b72|\u9b8f|\u9bb1|\u9bbb|\u9c00|\u9d70|\u9d6b|\u9db4|\u9e19|\u9ed1|\u2170|\u2171|\u2172|\u2173|\u2174|\u2175|\u2176|\u2177|\u2178|\u2179|\uffe2|\uffe4)).*$/,
  "alertText": "* 機種依存文字は入力できません。"
}

バリデーションチェックを行いたいclassのdata属性を変更

最後に、バリデーションチェックを行いたいclassに「validate[custom[pdc]]」を追加して完了です。

test.html
<input type="text" name="test" id="test" value="" placeholder="山田" class="validate[required,custom[pdc]]">

以上です。

9
9
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
9