JQuery验证插件的自定义方法无效

时间:2017-04-19 13:08:20

标签: jquery html validation

我已经为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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

见下面的代码。我修改使其更容易使用:

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