我有一个问题,我的验证开始工作只有点击按钮,当我第一次输入数据,我没有错误信息,休息服务器不保存无效数据,在下一个输入数据,验证器写错误的。我的代码
$(document).ready(function() {
$("#register-form").validate({
rules: {
login: {
required: true,
minlength: 3,
maxlength: 15,
regexp: '^[a-zA-Z0-9_-]+$'
},
password: {
required: true,
minlength: 3,
maxlength: 15,
},
firstName: {
required: true,
minlength: 2,
maxlength: 15,
},
lastName: {
required: true,
minlength: 2,
maxlength: 15,
},
email: {
required: true,
email: true
},
birthDate: {
required: true,
regexp: '^((19|20)\\d\\d)-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$',
}
},
messages: {
login: {
required: "This field cannot be null",
minlength: "Login at least 3 symbols",
maxlength: "Name maximum 15 symbols",
regexp: 'Login can consist of letters, numbers, underscores(_),hyphens(-) !'
},
password: {
required: "This field cannot be null",
minlength: "Password at least 3 symbols",
maxlength: "Password maximum 15 symbols",
},
firstName: {
required: "This field cannot be null",
minlength: "Name at least 2 symbols",
maxlength: "Name maximum 15 symbols",
},
lastName: {
required: "This field cannot be null",
minlength: "Surname at least 2 symbols",
maxlength: "Surname maximum 15 symbols",
},
email: "Please enter a valid email address",
birthDate: {
required: "This field cannot be null",
regexp: "Please input date in format YYYY-MM-DD",
}
}
});
jQuery.validator.addMethod(
'regexp',
function(value, element, regexp) {
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
},
"Please check your input."
);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.js"></script>
<form action="" id="register-form">
<div class="form-left-col">
<label>Login:</label>
<input type="text" id="login" name="login" value="" required />
<label>Password:</label>
<input type="text" id="password" name="password" value="" required/>
<label>First Name:</label>
<input type="text" id="firstName" name="firstName" value="" required/>
<label>Last Name:</label>
<input type="text" id="lastName" name="lastName" value="" required/>
<label>Email:</label>
<input type="text" id="email" name="email" value="" required/>
<label>Birthday:</label>
<input type="text" id="birthDate" name="birthDate" value="" required/>
<label>Role:</label>
<select id="role">
<option selected="selected">USER</option>
<option>ADMIN</option>
</select>
<button class="save">Save</button>
</div>
</form>