フォームチェックの面接問題を聞くと、どんな答えがほしいですか.

4009 ワード

面接問題


8~10ビットの長さの文字列のみを含むユーザー名フォームを検証し、JavaScriptで検証関数を実現します.

1解決プロセス


1.1まず問題の需要を確認する(ほとんど確認した人がいない、もちろん正しいと書いた人もいない)


1.1.1問題要求

  • 長さ8-10ビット
  • 数字とアルファベット
  • のみを含む
  • JSチェック関数
  • 1.1.2 Tips

  • ほとんど確認されていません
  • 誰も書いたことがない
  • ここに問題があれば、後は
  • に合わないに違いない.

    1.2次に考えを分析する(コードを書くことができる等価論理表現に変換しても、誰も正しいことを書いたことがない)


    1.2.1等価論理変換一

  • アルファベット
  • を含む
  • は、数字
  • を含む.
  • は、数字とアルファベットの
  • のみです.
  • 長さ8-10ビット
  • 1.2.2等価論理変換二

  • はすべて数字
  • ではありません.
  • はすべてアルファベットではありません
  • は、数字とアルファベットの
  • のみです.
  • 長さ8-10ビット
  • 1.2.3等価論理変換三

  • すべての文字ASCIIコードは、数字とアルファベットの範囲で
  • です.
  • 長さ8-10ビット
  • 1.2.4 Tips

  • 先の需要がはっきりしていても、ここで変換が等価でなくても正確な結果は得られない
  • .
  • はこの中の等価分解があって、最も基本的なTestCaseもあって、後で
  • を検査するのに便利です
  • コードが書けなくてもここではっきり言えます
  • はっきり言えなくてもいいです.試行錯誤を繰り返し、積極的に考える過程を見る必要があります.

    1.3次にコアコード実装(クリアの正則、私たちも先に正則)


    1.3.1ゼロ幅の順方向先行断言の使用


    1.3.1.1コード実装
    
    /^(?=.*\d.*)(?=.*[a-zA-Z].*)[0-9a-zA-Z]{8,10}$/.test(str)
    
    

    1.3.1.2コード解釈
  • (?=)は順方向先行断言を表し、条件を満たす他のマッチング結果が真である、すなわちカッコ内の式マッチング全体が真である
  • である.
  • は、コードの任意の位置
  • に現れることができる.
  • は、最終的な整合幅
  • を占有する.
  • ここでは、数字とアルファベットを含む数字とアルファベットのみを含む8-10ビットの文字列
  • を表す.
    1.3.1.3論理表現
  • は、数字
  • を含む.
  • アルファベット
  • を含む
  • 8-10ビットの数字とアルファベットの組み合わせ(フルマッチング)
  • 1.3.2ゼロ幅負の先行断言の使用


    1.3.2.1コード実装
    
    /^(?!\d+$)(?![a-zA-Z]+$)[0-9a-zA-Z]{8,10}$/.test(str)
    
    

    1.3.2.2コード解釈
  • (?!)は負の先行断言を表し、非条件を満たす他の一致結果が真である、すなわち括弧内の式が一致しない一致結果全体が真である
  • である.
  • は、コードの任意の位置
  • に現れることができる.
  • は、最終的な整合幅
  • を占有する.
  • ここでは、すべてが数字ではなく、すべてがアルファベットではない、数字とアルファベットのみを含む8-10ビットの文字列
  • を表す.
    1.3.2.3論理表現
  • 不完全が数字である(フルマッチング)
  • すべてがアルファベットではない(フルマッチング)
  • 8-10ビットの数字とアルファベットの組み合わせ(フルマッチング)
  • 1.3.2.4

    1.3.3上記の方法が分からない場合は、分割してもいいです。


    1.3.3.1コード実装
    
    !/^\d+$/.test(str) && !/^[a-zA-Z]+$/.test(str) && /^[0-9a-zA-Z]{8,10}$/.test(str)
    
    

    1.3.3.2コード解釈
  • は解釈せず、直接的な論理表現
  • 1.3.3.3論理表現
  • 不完全が数字である(フルマッチング)
  • すべてがアルファベットではない(フルマッチング)
  • 8-10ビットの数字とアルファベットの組み合わせ(フルマッチング)
  • 1.3.4正規表現が分からない場合は、文字で判断することもできます


    1.3.4.1コード実装
    
    //     ASCII 
    
    var rangeChars = '09azAZ';
    
    var char0Code = rangeChars.charCodeAt(0),
    
    char9Code = rangeChars.charCodeAt(1),
    
    charaCode = rangeChars.charCodeAt(2),
    
    charzCode = rangeChars.charCodeAt(3),
    
    charACode = rangeChars.charCodeAt(4),
    
    charZCode = rangeChars.charCodeAt(5);
    
    Array.from(str).every(char => {
    
    return '0' <= char && char <= '9' || 'a' <= char && char <= 'z' || 'A' <= char && char <= 'Z'
    
    });
    
    Array.from(str).some(char => {
    
        return '0' <= char && char <= '9'
    
    });
    
    Array.from(str).some(char => {
    
    return 'a' <= char && char <= 'z' || 'A' <= char && char <= 'Z'
    
    });
    
    8 <= str.length && str.length <= 10
    
    

    1.4結果の出力

    
    export const validationUtil = {
    
        isNameValid:(str) => {
    
            //  isNameValid    ,      undefind,  null   ,            
    
            str += '';
    
            str = str.trim();
    
            return /^(?!\d+$)(?![a-zA-Z]+$)[0-9a-zA-Z]{8,10}$/.test(str);
    
        }
    
    }
    
    

    2よくある質問

  • 検査trim
  • を書かない
  • 正則不写首尾マッチング
  • /^[0-9 a-zA-Z]{8,10}$/題名結果として
  • 自分で書いた正則、自分でも何の意味が分からない
  • 3参考資料


    3.1正則書

  • 基礎
  • 正規表現を学習
  • 正規表現必須
  • 不思議なマッチング
  • ステップアップ
  • 正規表現
  • に精通
  • 正則ガイドライン

  • 3.2正規ツール

  • 分析デバッグツール
  • Regex Buddy, Regex Magic
  • Match Tracer
  • 正規表現101
  • regex101
  • regexr

  • 可視化分析
  • regulex
  • regexper