【メモ】Laravel10 カスタムバリデーションの作成方法、非推奨→推奨 - Qiita
<?php namespace App\Rules; use Illuminate\Contracts\Validation\Rule; class AllowedFields implements Rule { protected $allowedFields; public function __construct(array $allowedFields) { $this->allowedFields = $allowedFields; } // 既定のpassesをオーバーラップすることで、独自のチェックを作成する。 public function passes($attribute, $value) { // リクエストのキーが許可されたフィールドの中にあるかチェック return in_array($attribute, $this->allowedFields); } //
ReactとZodで作る堅牢なフォームバリデーション - ICS MEDIA
前回の記事『2024年版 HTMLで作るフォームバリデーション』ではHTMLの機能を駆使したフォームバリデーションの実装について解説しました。HTMLのみでも高機能なフォームを作成できるのは解説したとおりですが、HTMLに加えてJavaScriptを組み合わせることでより高機能なフォームを作成できます。それに加えて、開発者体験の向上も期待できます。 本記事では3つのライブラリを使用して実践的なフォームを作成する方法を解説します。 UIライブラリ「React」 フォーム向けライブラリ「React Hook Form」 型システムと相性の良いスキーマバリデーションライブラリ「Zod」 また、静的型付け言語であるTypeScriptもこれらのライブラリと同時に使用し、堅牢なフォームの実装を目指します。 本記事を読むことで以下の知識が身につきます。 フォーム画面のユーザー体験（UX）と、フォーム実
React Hook Formによるフォームバリデーション - わくわくBank
import React, { FC } from 'react'; import { useForm } from 'react-hook-form'; type FormInputs = { postTitle: string; postDescription: string; }; const Sample: FC = () => { const { register, errors, handleSubmit } = useForm<FormInputs>(); const onSubmit = (data: FormInputs) => console.log(data); return ( <form onSubmit={handleSubmit(onSubmit)}> <input name="postTitle" ref={register({ required: 'タイト
【2022年】 React Hook FormでValidationライブラリはどれにするか?
React + Typescript + MUIv5 + React Hook Form で開発環境を作成しています。 今回は React Hook FormでValidationライブラリをどれにするか? について調査しました。 React Hook Form が標準で対応しているライブラリ React Hook Form が標準で対応しているライブラリは以下の10個になります。 正確には React Hook Form で 外部の検証ライブラリを使用する為に @hookform/resolvers が必要なのですが、この @hookform/resolvers が標準対応しているライブラリが以下の10個になります。 その他のライブラリもカスタムリゾルバを構築して使用できます。 class validator https://github.com/typestack/class-vali
[JavaScript] FileList オブジェクトを理解する｜tsuchippo blog
選択したファイルをあれこれ操作したい 下記のようなファイル選択画面でユーザが選択したファイルに関して、実際にサーバにアップロードする前にファイルの中身をチェックしたり、バリデーション(ファイル形式や容量制限)をかけたい… ということって結構ありますよね。 なんの制限もなくドカドカ上げられちゃうとサーバが逼迫したりするので… そういったときに役立つかもしれない？ ファイル操作のアレコレや FileList オブジェクトに関してまとめてみようかな〜ということで今回は、
![[JavaScript] FileList オブジェクトを理解する｜tsuchippo blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/42ef4d4cc0ac17815f31551e45d160675b99715f/height=288;version=1;width=512/https%3A%2F%2Ftsuchippo.com%2Fwp-content%2Fuploads%2F2021%2F06%2Ffilelistobj.jpg)
CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方 - ICS MEDIA
モダンブラウザでサポートされているCSSの疑似クラスを使えば、JavaScriptでフォーム状態を監視することなく、CSSで状態を検知できるようになりました。また、HTMLのpattern属性を使えば入力バリデーション機能（※）もつけられます。これらを活用することで以前よりも手軽にインタラクティブなフォームを実現できます。 デモを別ウインドウで再生する ソースコードを確認する ※あくまでform要素への入力バリデーションなので、送信される値に対して保証はありません。送信される値をチェックするにはサーバー側のバリデーションが別途必要になります。 さまざまな状態を選択できる疑似クラス 疑似クラス（Pseudo-classes）はCSSで使えるセレクターの一種で特定の状態の要素を指定できます。:hoverも疑似クラスの1つです。::afterは「疑似要素」と呼ばれ、表記は似ていますが呼び名が違う
HTML5なら外部ライブラリを利用しないでリアルタイム入力チェック出来る - Qiita
リアルタイム入力チェックは今のWEBページでは割りと標準化されつつあるけど、 ライブラリを選定したり、画面の表示を考えたりと何かと面倒。 HTML5の機能で追加されたバリデーション機能を利用すればそういった煩わしさから開放されるのでは？ と思いたち、外部ライブラリを一切使わずにリアルタイム入力チェックを実装してみた。 コード <section> <form id="sampleForm"> <label> 半角英数字以外を入力してみよう <input type="text" id="input" placeholder="半角英数字で入力" pattern="^[0-9A-Za-z]+$" required> </label> <button type="submit" id="submit">送信</button> </form> </section> <script> "use str
Angular > Reactive Formsの使い方が初心者にわかりにくすぎるので、例を交えて取り合えず実装できる様にまとめて見た - Qiita
基本知識 使用するAPIは以下の３つです FormControl // 1個のフォームに相当。( input, checkbox...タグ 単位で用意する ) FormGroup // 複数のフォームを束ねるクラス。 ( formタグ単位で用意する ) FormArray // 同じ形式のフォームを配列で管理する。 ( address_1, address_2, address_3, ... ) 全てのクラスは抽象クラス(AbstractControl)を継承しています。 example(本題) 以下の様なフォームの実装を考えます。 ↑図が間違っていたので修正しました。(2018/7/19) 上記の図では フォームが 「単体か or 配列か」 ✖️ フォームを 「親コンポーネントに記載するか or 子コンポーネントに切り出すか」 の4パターンの実装を想定しており、この４パターンでほとんどの
[Swift] バリデーションチェックは、正規表現で！ - Qiita
はじめに アプリの入力データをif文とAnd条件で数珠つなぎで判定していくとカオスになりますよね。 やはりここは、正規表現の出番ですね。 ただし、Swiftは、正規表現が扱いづらいため、 少しだけ簡単に利用できるようにします。 Custom Operatorsを利用する import UIKit infix operator =~ infix operator !~ func =~(lhs: String, rhs: String) -> Bool { guard let regex = try? NSRegularExpression(pattern: rhs, options: NSRegularExpression.Options()) else { return false } return regex.numberOfMatches(in: lhs, options: NSReg
![[Swift] バリデーションチェックは、正規表現で！ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/cf7ebc93b06ccaf93c74576ffe8d1ad2101a7d71/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCU3dpZnQlNUQlMjAlRTMlODMlOTAlRTMlODMlQUElRTMlODMlODclRTMlODMlQkMlRTMlODIlQjclRTMlODMlQTclRTMlODMlQjMlRTMlODMlODElRTMlODIlQTclRTMlODMlODMlRTMlODIlQUYlRTMlODElQUYlRTMlODAlODElRTYlQUQlQTMlRTglQTYlOEYlRTglQTElQTglRTclOEYlQkUlRTMlODElQTclRUYlQkMlODEmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTQyNGY5MTdjZTlhYzgxYTFlMjZlNzFmZjM3MGUyOWEx%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBlS3VzaGlkYSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9M2QwYTlhNTJjNzUzNmQwOTk5NTA3NDgxZTRlMmZjZmE%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-U1RW44OG44OD44Kv%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D85edecc40dd8e57b7e75481ac3dd861a)
楽に検証！値をチェックしてくれるfilter関数
今回はバリデート関数をご紹介します。 いままではフォームの値をチェックするときってだいたいpreg_match関数などでチェックしていたのですが検証専用の関数がありました。 filter関数です。pregでチェックしなくても検証してくれるので楽です。 emailとかの精度になるとどこまで許容するかが問題になるのですが、携帯アドレスのようにアカウントにドットが複数つくとエラーになります。 各フィルターは実際に試したほうがよさそうですね。どれをスルーしてどれを止めるか。デモページで確認してみてください。 スポンサーリンク filter_var関数 バリデート関係や除去関係の関数が含まれています。それぞれの関数を見ていきましょう。下記はマニュアルに例を付け足したものです。 true/falseチェック filter_var(チェックしたい値, FILTER_VALIDATE_BOOLEAN, オ
バリデーションのベストプラクティス - ２４時間CakePHP
イントロダクション CakePHPの使い方は多種多様で、もちろん一つのやり方が正解ということはありません。 しかし、CakePHPはフレームワークであるわけで、想定された使い方以外ではその真価をなかなか発揮できません。 CakePHPにおけるモデルは、ビジネスロジックを置くレイヤとして想定されています。 そして、バリデーションを用いることによって保存のロジックを構築するということも想定されています。 これは、何故Cookbookで紹介されるコードが、ほとんどバリデーションとModel::save()の組み合わせであるかということかの答えにもなっています。 悪い例 あなたはModel::save()の代わりとして、以下のようなadd()メソッドをモデルに定義しているかもしれません: <?php class Post extends AppModel { var $validate = arr
どんなフォームにも使えるjQueryのフォームバリデーション exValidation :: 5509
jquery.validation.jsというフォームバリデーションプラグインを公開していますが、使える場面が割と限定されてしまうような作りだったので、より幅広く使えるようにexValidationという名前で新しいjQueryプラグインとして作り直しました。伴って仕様や使い方が異なる部分も多いので、ドキュメントとして書いておきます。ただし前半のバリデーションルール周りは同じエンジンを使ってるので、ほぼ同じです。ちなみにすごい長いです。。 ルールを割り当てる際のclass名がhogeからchkhogeに代わりました。アップデートして使う場合は注意してください。 サンプル1: エラーを右上に表示 サンプル2: エラーを下に表示 トピックス ダウンロード 使い方 1. JSファイルを読み込む 2. 基本バリデーションルール 3. select, checkbox、radio、複数項目の場合 4
自動でリンク切れチェックし、Webサイトの品質を保つ便利ツール8選 | 人手に頼らないWebサイトの戦略的品質管理指南
Webサイトの品質維持には、リンク切れや不要なファイルを少なくすることが重要です。今回は、Webサイト品質の問題点発見とその解決へのスピードを格段に上げる自動チェックツールを8つ紹介します。日本アイ・ビー・エムが提供するIBM Rational Policy TesterやW3Cリンクチェッカー、W3Cマークアップ検証サービス、リンク切れカッター、Web Developerなどのフリーツールも紹介 数百ページ～数万ページというWebサイトでは、人的な検査だけですべての問題点をチェックするのは実質的に不可能に近い。また、ページ数が少なくても、チェック漏れがあっては意味がない。 自動チェックツールを利用することで、問題点発見とその解決へのスピードは格段に上がる。現代のWebサイトでは、理想的な品質管理を実現するには、何らかのツールの利用は必須だともいえる。 最も効率良く診断できる専門ツール手前
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
A new way to validate Angular Forms - HackMD
HTML 5 Outliner
The W3C Markup Validation Service