正規表現を使用したjqueryの入力の検証

Question

名前入力に数字を書き込むと、名前と電子メールの2つの入力を持つシンプルなフォームを作成していましたが、数字はメールと同じ必要なメッセージのようには表示されません

フィドル：https://jsfiddle.net/p6ohxxxe/

はあなたの助けが理解されるであろう。この問題の私を助けてください

HTML

<div class="form-container"> 
     <form action="" id="my-form" name="myForm"> 
      <div class="form-row"> 
       <div class="input-container"> 
        <label for="name" class="form-label">Name:</label> 
        <input type="text" class="form-input" name="name" placeholder="Enter your Name"> 
       </div> 
      </div> 
      <div class="form-row"> 
       <div class="input-container"> 
        <label for="Email" class="form-label">Email:</label> 
        <input type="text" class="form-input" name="email" placeholder="Enter your Email"> 
       </div> 
      </div> 
      <div class="form-row"> 
       <div class="input-container"> 
        <button type="submit" class="btnSubmit" >Submit</button> 
       </div> 
      </div> 
     </form> 
    </div> 

のJS

$("form[name='myForm']").validate({ 
     rules: { 
      name:"required", 
      email:{ 
       required:true, 
       email:true 
      } 
     }, 
     messages:{ 
      name:"please Enter your Name", 
      email:"Please Enter a valid Email Address" 
     }, 
     submitHandler: function(form) { 
      form.submit(); 

     } 
    }); 

CSS

.form-container{ 
    position: relative; 
    width: 100%; 
    padding: 8px; 
    box-sizing: border-box; 
    background: rgba(40, 91, 255, 0.24); 
    margin:30px auto; 
    max-width: 50%; 
} 
.input-container{ 
    width: 100%; 
    height:auto; 
    padding-bottom: 12px; 
} 
.form-label{ 
    font-weight: bold; 
    margin-bottom: 10px; 
    font-size: 15px; 
    display: block; 
    color:#000; 
} 
.form-input{ 
    display: block; 
    width: 50%; 
    height: 35px; 
    padding: 6px 12px; 
    font-size: 14px; 
    line-height: 1.42857143; 
    color: #555; 
    background-color: #fff; 
    background-image: none; 
    border: 1px solid #ccc; 
    border-radius: 0; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; 
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 
} 
.form-row{ 
    position: relative; 
    width:100%; 
    padding: 14px; 
} 
.btnSubmit{ 
    padding: 10px 40px; 
    position: relative; 
    background: #31708f; 
    border-radius: 5px; 
    outline: none; 
    box-shadow: none; 
    color: white; 

} 
.error{ 
    color:red; 
    border-color: red; 
    padding: 3px 2px; 
} 

Answer 1

私はあなたの質問を理解していれば知っているが、validate pluginを使用して、追加の検証ルールを作成し、検証パラメータとして正規表現を使用することができますいけません。

jQuery.validator.addMethod("regex", function(value, element, regexp) { 
    var re = new RegExp(regexp); 
    return this.optional(element) || re.test(value); 
},"Invalid Data"); 

入力：私はこのコードを使用してい

<input required="" data-rule-regex="^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$" title="Enter a valid IPV4" name="ip" type="text">