使用正則表達式在jquery中的輸入驗證

-2

我正在創建一個簡單的表單，其中有兩個輸入名稱和電子郵件提交如果我寫入名稱輸入數字然後它會顯示數字是不允許的消息像電子郵件中所需的消息相同使用正則表達式在jquery中的輸入驗證

請幫我出這個問題您的幫助將不勝感激的

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>

$("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; 
}

來源

2017-04-18 Mujtaba Hussain Bhat

簡單的驗證將添加必需的和更改電子郵件輸入爲type =「電子郵件」喜歡這裏https://jsfiddle.net/p6ohxxxe/1 /如果你想在每個框下顯示錯誤消息，然後使用一些庫或手動引用這裏http://stackoverflow.com/questions/25572882/how-to-show-validation-message-below-each- textbox-using-jquery –

但我想完整驗證名稱也在其中我們使用正則表達式@vinod路易斯。那件事我已經做了 –

我不知道如果我明白你的問題，但使用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">

來源

2017-04-18 11:58:39

你可以請更新我的小提琴你的幫助將被appericiated –

@MujtabaHussainBhat這是非常簡單的，我發佈的代碼是很好的總結，只需調用外部資源：https：//jsfiddle.net/sparhawk_odin/p6ohxxxe/9/ 不要忘記將此標記爲接受的答案 –

使用正則表達式在jquery中的輸入驗證

回答

相關問題