我正在尝试在网页上创建一个表单，Javascript/Jquery 将对表单执行客户端验证。我需要它不仅检查必填字段是否已填写，而且是否已正确填写（即电话号码的格式为 000-000-0000，电子邮件的末尾有一个 @example.com 并输入了两个名称）名称字段）。我一直在尝试在线查找示例代码，但我发现的代码大多破坏了我已有的代码。这是表单的一个字段的代码：
HTML：
<div class="contactForm">
<label for="phone">Phone: </label>
<div id="errorphone" class="error"></div>
<input type="phone" name="phone" id="phone" placeholder="000-000-0000" required>
</div>
Javascript：
$("document").ready(function(){
console.log("Loaded");
$("#submit").click(function(){
checkPhone();
});
$("#phone").change(function(){
console.log("Something in phone changed");
checkPhone();
});
function checkPhone(inputtxt){
var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if($.trim($("#phone").val())==""){
$("#errorphone").html("<p>You missed your phone number</p>");
$("#errorphone").addClass("showerror");
}
else if((inputtxt.value.match(phoneno)==false){
$("errorphone").html("<p>Please enter your number in the format 000-000-0000</p>");
$("#errorphone").addClass("showerror");
}
else{
$("#errorphone").html("");
$("#errorphone").removeClass("showerror");
}
}
Javascript曾经用于检查该字段是否为空，但是当我尝试添加代码以验证格式是否正确时，所有Javascript 都停止工作。这是我尝试添加格式验证之前的原始 checkPhone 函数：
function checkName(){
if($.trim($("#name").val())==""){
$("#errorname").html("<p>You missed your name</p>");
$("#errorname").addClass("showerror");
}
else{
$("#errorname").html("");
$("#errorname").removeClass("showerror");
}
}
我正在使用 Sublime，并且当前 Javascript 中的 else 语句没有正确着色，所以我假设问题可能与语法有关，因为似乎 else 语句不再被识别。但坦率地说，我什至不确定我是否正确地进行格式验证，而且我确信有一种更简单的方法可以完全进行表单验证。我还注意到当前版本的 checkPhone 将 inputtxt 作为条件，但该字段的输入类型被列为电话。也许这就是问题所在？
无论哪种方式，我正在使用的方法以及如何进行的任何帮助都会很棒。
正如我在评论中所述，我推荐jquery 验证插件。以下是您如何使用插件验证您的电话号码。如果您阅读文档，您会看到有许多示例。这是一个演示：https : //jsfiddle.net/6gojrte2/
HTML 标记：
<form id="myform">
<label for="phone">Phone: </label>
<input name="field" placeholder="000-000-0000"><br/>
<input type="submit" value="Validate!">
</form>
所需的脚本
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
$(document).ready(function () {
$( "#myform" ).validate({
rules: {
field: {
required: true,
phone: true
}
}
});
jQuery.validator.addMethod("phone", function (phone_number, element) {
phone_number = phone_number.replace(/\s+/g, "");
return this.optional(element) || phone_number.length > 9 && phone_number.match(/^\(?[\d\s]{3}-[\d\s]{3}-[\d\s]{4}$/);
}, "Invalid phone number");
});
</script>
但是，如果您不想使用该插件，这里是您验证的解决方案。我纠正了一些错误。
<script>
$("document").ready(function(){
$("#submit").click(function(){
checkPhone($('#phone').val());
});
});
$("#phone").keyup(function(){
checkPhone($('#phone').val());
});
function checkPhone(inputtxt){
var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if($.trim($("#phone").val())==""){
$("#errorphone").html("<p>You missed your phone number</p>");
$("#errorphone").addClass("showerror");
}
else if((inputtxt.match(phoneno))==false || inputtxt.length < 12){
$("#errorphone").html("<p>Please enter your number in the format 000-000-0000</p>");
$("#errorphone").addClass("showerror");
}
else{
$("#errorphone").html("");
$("#errorphone").removeClass("showerror");
}
}
</script>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句