在输入字段上进行电子邮件和电话验证时遇到一些问题。
基本上我选择了电子邮件输入后验证。电话验证 - 主要用于检查使用的号码。
我找到jQuery Validate并在我的演示中引用了它。
这是我第一次进行Reg Ex Validation并且有点困惑所以希望有人可以在这方面帮助我。
手机验证工作正常,我似乎无法弄清楚如何在测试时满足该领域的要求。它还要求将电子邮件作为必填字段。
最终,用户必须输入有效的电子邮件或电话号码,因此我也需要进行验证或错误处理。
这是我的jQuery:
var ebuForm = {
init : function() {
ebuForm.showInput();
ebuForm.validatePhone();
},
showInput : function(e) {
var radioInput = $("input[type='radio']"),
emailRadio = $("input[value='email']");
radioInput.change(function(){
var emailInput = $('.email-input'),
phoneInput = $('.phone-input');
if($(this).val() =="email") {
emailInput.show();
phoneInput.hide();
console.log('Email Enabled');
} else {
emailInput.hide();
phoneInput.show();
console.log('Phone Enabled');
}
});
emailRadio.prop('checked', true).trigger("change");
},
validatePhone : function() {
$('#myform').validate({
rules: {
phone: {
phoneUS: true,
required: true
}
},
submitHandler: function(form) { // for demo
alert('valid form');
return false;
}
});
}
};
$(function() {
ebuForm.init();
});
答案 0 :(得分:0)
工作小提琴示例:http://jsfiddle.net/775X2/56/
您的HTML:
<form id="myform">
<div class="grid4">
<input type="radio" checked="checked" tabindex="50" class="left" name="x" id="email" value="email" />
<label for="email" class="left marginRight20">Email</label>
<input type="radio" tabindex="60" class="left" name="x" id="phone" />
<label for="phone" class="left">Phone</label>
<br />
<input type="text" class="email-input" name="emailer" placeholder="Email Address" />
<input type="text" class="phone-input" name="phone" placeholder="Phone Number" />
</div>
</form>
<a href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>
一些jQuery:
var ebuForm = {
init: function () {
ebuForm.showInput();
ebuForm.validatePhone();
},
showInput: function (e) {
var radioInput = $("input[type='radio']"),
emailRadio = $("input[value='email']");
radioInput.change(function () {
var emailInput = $('.email-input'),
phoneInput = $('.phone-input');
if ($(this).val() == "email") {
emailInput.show();
phoneInput.hide();
console.log('Email Enabled');
} else {
emailInput.hide();
phoneInput.show();
console.log('Phone Enabled');
}
});
emailRadio.prop('checked', true).trigger("change");
},
validatePhone: function () {
$('#myform').validate({
rules: {
phone: {
phoneUS: true,
required: true
},
emailer: {
required: true,
email: true
},
},
submitHandler: function (form) { // for demo
alert('valid form');
return false;
}
});
}
};
$(function () {
ebuForm.init();
});