Question

我正在创建一个简单的表单，其中有两个输入名称和电子邮件提交，如果我在名称输入中写入数字，那么它将显示数字不允许的消息，如同在电子邮件中所需的消息

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

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，您可以创建其他验证规则并使用regex作为验证参数。我正在使用此代码：

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中的输入

1 个答案: