[英]Validation for 10 digit mobile number and Showing Color On Input If Invalid
[英]Validation for 10 digit mobile number and focus input field on invalid
我需要在 jQuery 中验证电子邮件和手机号码的代码,并且还需要在不满足验证的特定字段上使用focus()
。
这是我的查询
<form name="enquiry_form" method="post" id="enquiry_form">
Full Name *
<input class="input-style" name="name" id="name" type="text" required>
Email *
<input class="input-style" name="email" id="email" type="email" required>
Phone *
<input name="mobile" id="mobile" type="number" required>
<input type="submit" value="SUBMIT" id="enq_submit"">
</form>
上面的代码是正确的,但移动验证并不完美。
我修改为
$('#enquiry_form').validate({
rules:{
name:"required",
email:{
required:true,
email:true
},
mobile:{
required:true,
minlength:9,
maxlength:10,
number: true
},
messages:{
name:"Please enter your username..!",
email:"Please enter your email..!",
mobile:"Enter your mobile no"
},
submitHandler: function(form) {alert("working");
//write your success code here
}
});
对于电子邮件验证, <input type="email">
就足够了..
对于移动不使用输入模式属性如下:
<input type="number" pattern="\d{3}[\-]\d{3}[\-]\d{4}" required>
您可以在http://html5pattern.com上查看更多模式。
为了专注于领域,您可以使用 onkeyup() 事件作为:
function check()
{
var mobile = document.getElementById('mobile');
var message = document.getElementById('message');
var goodColor = "#0C6";
var badColor = "#FF9B37";
if(mobile.value.length!=10){
mobile.style.backgroundColor = badColor;
message.style.color = badColor;
message.innerHTML = "required 10 digits, match requested format!"
}}
并且您的 HTML 代码应该是:
<input name="mobile" id="mobile" type="number" required onkeyup="check(); return false;" ><span id="message"></span>
我使用 $form.submit() 因为它保持 html 输入验证。
我还使用了移动浏览器支持的输入类型 tel,只显示数字键盘。
<input type="tel" minlength="10" maxlength="10" id="mobile" name="mobile" title="10 digit mobile number" required>
$('#mob_frm').submit(function(e) {
e.preventDefault();
if(!$('#mobile').val().match('[0-9]{10}')) {
alert("Please put 10 digit mobile number");
return;
}
});
您也可以为此使用 jquery
var phoneNumber = 8882070980;
var filter = /^((\+[1-9]{1,4}[ \-]*)|(\([0-9]{2,3}\)[ \-]*)|([0-9]{2,4})[ \-]*)*?[0-9]{3,4}?[ \-]*[0-9]{3,4}?$/;
if (filter.test(phoneNumber)) {
if(phoneNumber.length==10){
var validate = true;
} else {
alert('Please put 10 digit mobile number');
var validate = false;
}
}
else {
alert('Not a valid number');
var validate = false;
}
if(validate){
//number is equal to 10 digit or number is not string
enter code here...
}
在测试所有答案后没有成功。 有时输入也带字母字符。
这是最后一个完整的工作代码,只有数字输入,如果数字不正确,还要记住用户的退格按钮事件。
$("#phone").keydown(function(event) { k = event.which; if ((k >= 96 && k <= 105) || k == 8) { if ($(this).val().length == 10) { if (k == 8) { return true; } else { event.preventDefault(); return false; } } } else { event.preventDefault(); return false; } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input name="phone" id="phone" placeholder="Mobile Number" class="form-control" type="number" required>
在脚本标记DEMO 中使用 jquery 验证器
<script src="js/jquery.validate.min.js"></script>
并通过这样验证您的元素
<form name="enquiry_form" method="post" id="enquiry_form">
Full Name *
<input class="input-style" name="name" id="name" type="text"/>
<br>
Email *
<input class="input-style" name="email" id="email" type="email"><br>
Phone *
<input id="mobile" name="mobile" id="mobile"></input><br>
<input type="submit" value="SUBMIT" id="enq_submit">
</form>
$('#enquiry_form').validate({
rules:{
name:"required",
email:{
required:true,
email:true
},
mobile:{
required:true,
minlength:9,
maxlength:10,
}
},
messages:{
name:"Please enter your username..!",
email:"Please enter your email..!",
mobile:"Enter your mobile no"
},
submitHandler: function(form) {
alert("working");
//write your success code here
}
});
function is_mobile_valid(string_or_number){
var mobile=string_or_number;
if(mobile.length!=10){
return false;
}
intRegex = /[0-9 -()+]+$/;
is_mobile=true;
for ( var i=0; i < 10; i++) {
if(intRegex.test(mobile[i]))
{
continue;
}
else{
is_mobile=false;
break;
}
}
return is_mobile;
}
您可以通过调用函数is_mobile_valid(your_string_of_mobile_number);
检查is_mobile_valid(your_string_of_mobile_number);
function isMobileNumber(evt, sender) { // Allows only 10 numbers // ONKEYPRESS FUNCTION
//evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
var NumValue = $(sender).val();
if (charCode > 31 && (charCode < 48 || charCode > 57)) {//|| NumValue.length > 9) {
return false;
}
return true;}
function isProperMobileNumber(txtMobId) { //// VALIDATOR FUNCTION
var txtMobile = document.getElementById(txtMobId);
if (!isNumeric(txtMobile.value)) { $(txtMobile).css("border-color", "red"); return false; }
if (txtMobile.value.length < 10) {
$(txtMobile).css("border-color", "red");
return false;
}
$(txtMobile).css("border-color", "")
return true; }
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n) }
var message = document.getElementById('contact-error'); $('#contact').focusout(function(){ if(!$(this).val().match('[0-9]{10}')) { $('#contact-error').addClass('contact-message'); message.innerHTML = "required 10 digits, match requested format!"; }else { $('#contact-error').removeClass('contact-message'); message.innerHTML = ""; } })
.contact-message { display: block; margin-bottom: 20px; color: #cc0033; }
<input type="text" id="contact" required> <span id="contact-error"></span>
$().ready(function () {
$.validator.addMethod(
"tendigits",
function (value, element) {
if (value == "")
return false;
return value.match(/^\d{10}$/);
},
"Please enter 10 digits Contact # (No spaces or dash)"
);
$('#frm_registration').validate({
rules: {
phone: "tendigits"
},
messages: {
phone: "Please enter 10 digits Contact # (No spaces or dash)",
}
});
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.