使用正则表达式验证jquery中的输入 [英] Validation for inputs in jquery using regex

问题描述

我正在创建一个简单的表单，该表单有两个输入，如果我在名称输入中写了数字，则提交时会输入名称"和电子邮件"，然后它将显示不允许输入的消息，就像电子邮件中的必需消息一样

i was creating a simple form which has two inputs Name and Email on submit if i write numbers in name input then it will show number is not allowed message as like required message same as in email

小提琴: https://jsfiddle.net/p6ohxxxe/

请帮助我解决这个问题，您的帮助将不胜感激

please help me out of this problem your help will be appreciated

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;
}

推荐答案

我不知道我是否理解您的问题，而是使用验证插件，您可以创建其他验证规则并将正则表达式用作验证参数.我正在使用此代码:

I dont know if I understand your question, but using the validate plugin, you can create additional validation rules and use regex as the validation parameter. I'm using this code:

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">

这篇关于使用正则表达式验证jquery中的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！