Layui正規表現の検証例
前文
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の正規表現検証の使い方について紹介しましたが、正規表現検証の詳細については、スクリプトハウスの過去記事を検索するか、以下の関連記事を引き続きご覧ください。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン