JQuery验证插件的自定义方法不起作用
JQuery验证插件的自定义方法不起作用
提问于 2017-04-19 21:08:20
我为JQuery验证插件添加了一个自定义方法，在浏览了这里和其他页面上的许多问题后，我就是想不通了。
当我没有输入自定义的电话号码字段时，我确实收到了一条错误消息，但是当我输入字母"A“时，表单确实通过了。
我该如何解决这个问题呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<form action="" id="registration-form">
<p>
Firstname
<input name="firstname" data-validation="required"
data-validation-length="1-30"
data-validation-error-msg="Firstname has to be an alphabetical value (1-30 chars)">
</p>
<p>
Prefix
<input name="prefix" data-validation="required"
data-validation-length="1-20"
data-validation-error-msg="Prefix has to be an alphabetical value (1-20 chars)">
</p>
<p>
Lastname
<input name="lastname" data-validation="required"
data-validation-length="1-50"
data-validation-error-msg="Lastname has to be an alphabetical value (1-50 chars)">
</p>
<p>
Company
<input name="company" data-validation="required"
data-validation-length="1-50"
data-validation-error-msg="Company has to be an alphabetical value (1-50 chars)">
</p>
<p>
Phonenumber
<input name="phonenumber" data-validation="required phonenumber"
data-validation-error-msg="This is not a valid phonenumber">
</p>
<p>
E-mail
<input name="mail" data-validation="email"
data-validation-error-msg="E-mail has to be a valid email">
</p>
<p>
<input value="Validate" type="submit">
<input value="Reset form" type="reset">
</p>
</form>
<script>
$(document).ready(function () {
$.validator.addMethod('phonenumber', function (value, element) {
return this.optional(element) || /^(\+91-|\+91|0)?\d{10}$/.test(value);
}, "Please enter a valid phone number");
});
$.validate({
});
</script>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2017-04-19 21:53:56
请参见下面的代码。我对其进行了修改，使其更易于使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<form action="" id="registration-form">
<p>
Firstname
<input name="firstname" class="required validate[required]" minlength="1" manlength="30" >
</p>
<p>
Prefix
<input name="prefix" class="required validate[required]" minlength="1" manlength="20"> </p>
<p>
Lastname
<input name="lastname" class="required validate[required]" minlength="1" manlength="50"> </p>
<p>
Company
<input name="company" class="required validate[required]" minlength="1" manlength="50"> </p>
<p>
Phonenumber
<input name="phonenumber" class="required validate[required] phonenumber"> </p>
<p>
E-mail
<input name="mail" class="email"> </p>
<p>
<input value="Validate" type="submit">
<input value="Reset form" type="reset">
</p>
</form>
<script>
$(document).ready(function () {
$.validator.addMethod('phonenumber', function (value, element) {
return this.optional(element) || /^(\+91-|\+91|0)?\d{10}$/.test(value);
}, "Please enter a valid phone number");
$(document).on('submit', 'form#registration-form', function(event) {
if(!$(this).valid()){
return false;
}
});
});
</script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43496692
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号