Velo by WixでLINE IDの入力欄を作成

こんにちは！

Wix専門のWeb制作会社 合同会社アクトワン代表 和田英也です！

弊社ではWixクリエイター同士が繋がれる有料オンラインサロン(月額330円)、Wix Tech Salonを運営しています。

サロン内では弊社が日々、Wix制作で気づいた情報などをシェアしております。

今回は非公開にしているFacebookグループにて、有料会員様のみに配信している投稿から、好評だったものをこちらのブログで公開致します。

Wix Tech Salonについて詳しく見る >>

LINE IDの入力欄

Wixのデータベース送信フォームなどで、LINE IDの入力欄を作れます。

LINE IDの形でテキストを入力していないと、エラーメッセージが出る仕組みを構築できます。

LINE IDにはいくつかの制限があります。以下が主な制限事項です。

Veloで正規表現にこのルールを入れ、当てはまってないとエラーメッセージが表示されます。

【 LINE IDの文字制限 】

1. 文字数: 4文字以上、20文字以内。

2. 使用可能な文字: 半角英数字（a-z、A-Z、0-9）および一部の記号（ハイフン「-」とアンダースコア「_」）。

3. 先頭文字: 数字で始めることはできません。

• 入力欄：#lineid

• エラーメッセージ(テキスト)：#errorMessage

Veloコード

$w.onReady(function () {
$w("#lineid").onBlur(() => {
validateLineId();
});
});
function validateLineId() {
const lineId = $w("#lineid").value;
const lineIdPattern = /^(?!\d)[a-zA-Z0-9_-]{4,20}$/;
if (!lineIdPattern.test(lineId)) {
$w("#errorMessage").text = "有効なLINE IDを入力してください。";
$w("#errorMessage").show();
} else {
$w("#errorMessage").hide();
}
}

Wix Tech Salon

アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております！

Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。 ご興味がある方はぜひ覗いてみてください!

Wix Tech Salon >>