1. ホーム
  2. Web プログラミング
  3. 正規表現

Layui正規表現の検証例

2022-01-18 18:26:42

前文

layuiの正規表現は、フォームで行います。そのため、まず最初に指定したフォームをhtmlに追加します。

公式のリファレンスドキュメントです。 https://www.layui.com/doc/element/form.html

参照する layui モジュールに form.js が存在することを確認する。

form.js を参照する簡単な手順 form タグを追加して class 属性を layui-form に設定し、検証用の属性 lay-verify は変更せずに layui.form を宣言し、送信ボタンイベントをリッスンします . 参考 js

<script src=". /js/layui/layui.js" charset="utf-8"></script>

要は lay.modules の中に form.js があることを確認することです。

form.jsを直接参照することもできます

フォームタグの追加

<form class="layui-form" action="">

バリデーションの対象となる属性を設定する

lay-verifyに値を割り当てる

<input type="text" class="input01 border" id="IdentifyId" 
name="IdentifyId" lay-verify="required|identity"/>

以下のような属性が付与されています。

<ブロッククオート

required (必須項目)
phone (携帯電話番号)
email(メールアドレス)
url (ウェブアドレス)
number (数字)
日付(date)
アイデンティティ(ID)
カスタム値

目的のものがない場合は、次のように自分で書きます。

カスタムバリデーション

htmlマークアップ検証の属性

<input type="text" lay-verify="username" placeholder="Please enter username">
<input type="password" lay-verify="pass" placeholder="Please enter password">

バリデーションをカスタマイズするためのルール

form.verify({
 username: function(value, item){ //value: value of the form, item: DOM object of the form
 if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s-]+$").test(value)){
 return 'Username cannot have special characters';
 }
 if(/(^\_)|(\__)|(\_+$)/.test(value)){
 return 'Username cannot have an underscore \'_\' at the beginning or end';
 }
 if(/^\d+\d+\d$/.test(value)){
 return 'The username cannot be all numbers';
 }
 }
 
 //We support both the above functional approach and the following array form
 //The two values of the array represent: [regular match, prompt text if match doesn't match]
 ,pass: [
 /^[\S]{6,12}$/
 ,'Password must be 6 to 12 digits, and no spaces'
 ] 
});

layui -form 使用上の注意

1. セレクトを使用する前にレンダリングする必要があります。

layui.use('form', function(){
 var form = layui.form; //only if this step is performed will some of the form elements be automatically trimmed successfully
 
 //......
 
 //But if your HTML is dynamically generated, auto-rendering will not work
 //so you need to perform the following method to render in the appropriate place
 form.render();
});

送信ボタン

<button type="button" class="layui-btn layui-btn-norma" 
lay-submit lay-filter="submit_button">OK to place an order</button>

js カスタムバリデーション js と送信時のアクション

layui.use('form', function(){
  var form = layui.form ;
  form.render();
  form.verify({
  payTotalAmount:[
   /(^[1-9]\d*(\. \d{1,2})? $)|(^0(\. \d{1,2})? $)/
   ,'Please enter the appropriate price'
  ]

  });
  form.on("submit(submit_button)", function () {
  onclickSearch();
  });

ここでは、layuiの正規表現検証の使い方について紹介しましたが、正規表現検証の詳細については、スクリプトハウスの過去記事を検索するか、以下の関連記事を引き続きご覧ください。