使用正则表达式在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中的输入验证

回答

相关问题