Javascript HTML表单字段-如何要求输入格式_Javascript_Html_Forms_Field_Masking

Javascript HTML表单字段-如何要求输入格式

javascript html forms

Javascript HTML表单字段-如何要求输入格式,javascript,html,forms,field,masking,Javascript,Html,Forms,Field,Masking,我想在这里做的是要求在我的HTML表单中输入电话号码为（XXX）XXX-XXXX，并将SS号码输入为XXX-XX-XXXX。就这样我这样做的唯一原因是，表单提交结果是一致的，并且易于导出到Excel 我被告知要使用Javascript来实现这一点，但也许我还不够先进，无法理解实现这一点的所有步骤有人能告诉我正确的方向吗？记住我是初学者哇，非常感谢Ethan和@suman bogati！我现在快到了！该字段现在弹出一个错误，说明使用正确的格式555-55-5555。太好了。但无论我在该字段中

我想在这里做的是要求在我的HTML表单中输入电话号码为（XXX）XXX-XXXX，并将SS号码输入为XXX-XX-XXXX。就这样

我这样做的唯一原因是，表单提交结果是一致的，并且易于导出到Excel

我被告知要使用Javascript来实现这一点，但也许我还不够先进，无法理解实现这一点的所有步骤

有人能告诉我正确的方向吗？记住我是初学者

哇，非常感谢Ethan和@suman bogati！我现在快到了！该字段现在弹出一个错误，说明使用正确的格式555-55-5555。太好了。但无论我在该字段中输入什么，弹出窗口都会持续。我试过555-55-5555，也试过555-555，但都不被接受。以下是该字段的HTML：

<label>
            Social Security Number:
            <input id="ssn" required pattern="^d{3}-d{2}-d{4}$"
                title="Expected pattern is ###-##-####" />
        </label>
</div>
    <script>$('form').on('submit', function(){
        $(this).find('input[name="SocialSecurity"]').each(function(){
        $(this).val() = $(this).val().replace(/-/g, '');
    });
    $(this).find('input[name="ssn"]').each(function(){
        $(this).val() = $(this).val().replace(/-/g, '');
    });
});</script>
    <br />


社会保险号码：
$（'form'）。在（'submit'，function（）上{
$（this）.find（'input[name=“SocialSecurity”]”）。每个（函数（）{
$（this.val（）=$（this.val（）.replace（/-/g'）；
});
$（this）.find（'input[name=“ssn”]”）。每个（函数（）{
$（this.val（）=$（this.val（）.replace（/-/g'）；
});
});

如果您想要两种模式匹配，请使用此模式

//for (XXX)-XXX-XXXX
var pattern =  /^\(\d{3}\)\-\d{3}\-\d{4}$/; 

//for XXX-XXX-XXXX
var pattern2 = /^\d{3}\-\d{3}\-\d{4}$/;

最简单的方法是使用多个字段：

<div>
    Phone:
   (<input type="text" name="phone-1" maxlength="3">)
   <input type="text" name="phone-2" maxlength="3">-
   <input type="text" name="phone-3" maxlength="4">
</div>
<div>
    SSN:
    <input type="text" name="ssn-1">-
    <input type="text" name="ssn-2">-
    <input type="text" name="ssn-3">
</div>

这也不是一个完美的方法：如果在这个函数中进行验证，但验证失败，用户将看到他或她的输入被规范化版本替换，这可能会令人不安

最好的方法是使用AJAX和

.serialize

；您不仅可以更好地控制UI，还可以执行所有需要的验证。但这可能有点超出了你现在需要做的

请注意，电话验证是最棘手的。HTML5手机验证是非常允许的，允许人们输入国际电话号码，其格式可能非常复杂。即使是美国人有时也会输入像“+1（555）555-1212”这样的电话号码，然后用8位数字代替7位数字。如果确实要将其限制为7位数字，则必须添加自己的自定义验证：

/^\(?\d{3}\)?[.\s-]?\d{3}[.\s-]\d{4}$/

这将涵盖人们使用的所有常见变体（句号、空格、破折号、括号），并且仍然只允许使用7位数的美国电话号码

下面是一个演示HTML5验证和规范化的JSFIDLE：

我希望这有帮助

以下是使用jquery和jquery工具验证程序的完整解决方案：处理这两种情况的正则表达式模式是：

^（\d{3}-|（\d{3}）\s）\d{2}-\d{4}$

HTML:


$（函数（）{
$（“#myform”）.validator（）；
});

我们可以用这样的东西：

<html>
<head>
</head>
<body>
<input type="text" id="ok">
<script>
document.getElementById("ok").onkeypress = function(e){
    var keycodes = new Array(0,48,49,50,51,52,53,54,55,56,57);
    var was = false;
    for(x in keycodes){
        if(keycodes[x] == e.charCode){
            was = true;
            break;
        }
        else{
            was = false;
        };
    };
    var val = this.value;
    if(was === true){
        switch(val.length){
            case 3:
                if(e.charCode !== 0){
                this.value += "-";
                }
                break;
            case 6:
                if(e.charCode !== 0){
                this.value += "-";
                }
                break;
            default:
                if(val.length > 10 && e.charCode !== 0){return false;};
                break;

        };
        val += e.charCode;
    }
    else{
        return false;
    };

};
</script>
</body>


document.getElementById（“ok”）.onkeypress=函数（e）{
var键码=新数组（0,48,49,50,51,52,53,54,55,56,57）；
var=false；
用于（键码中的x）{
if（键码[x]==e.charCode）{
是真的；
打破
}
否则{
was=假；
};
};
var val=该值；
如果（was==真）{
开关（val.length）{
案例3：
如果（例如，字符代码！==0）{
该值为+=“-”；
}
打破
案例6：
如果（例如，字符代码！==0）{
该值为+=“-”；
}
打破
违约：
如果（val.length>10&&e.charCode！==0）{return false；}；
打破
};
val+=e.charCode；
}
否则{
返回false；
};
};

我在ff中测试了它，在HTML5中，输入元素可以有一个。另一方面，您永远不应该信任客户端验证，因为它很容易被绕过，您始终必须在服务器端验证格式。因此，您希望两种模式应该匹配

（XXX）XXX-XXXX

和

（XXX）XXX-XXXX

？这是正确的。从可用性的角度来看，这种方法是完全错误的。您应该问：我可以有意义地处理哪些格式，并将它们规范化为我想要的格式，以及如何帮助用户使用其中的一些格式？解决错误的问题并不比解决正确的问题简单。谢谢。这是可行的，但现在无论我在字段中输入哪种格式，我都会得到“请输入正确的格式”。我的SSN模式中有一个输入错误（我在最后一位使用了三位数，而不是四位数）。我纠正了这一点，并添加了一个jsfiddle来演示它的所有功能：

/^\(?\d{3}\)?[.\s-]?\d{3}[.\s-]\d{4}$/

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" type="text/javascript"></script>
<link href="http://jquerytools.org/media/css/validator/form.css" type="text/css" rel="stylesheet">
<script>
$(function() {
    $("#myform").validator();
});
</script>
</head>
<body>
<form id="myform">
    <input type="text" name="name" pattern="^(\d{3}-|\(\d{3}\)\s)\d{2}-\d{4}$" maxlength="30" />
    <br>
    <input type="submit" name="submit" value="submit" />
</form>
</body>

<html>
<head>
</head>
<body>
<input type="text" id="ok">
<script>
document.getElementById("ok").onkeypress = function(e){
    var keycodes = new Array(0,48,49,50,51,52,53,54,55,56,57);
    var was = false;
    for(x in keycodes){
        if(keycodes[x] == e.charCode){
            was = true;
            break;
        }
        else{
            was = false;
        };
    };
    var val = this.value;
    if(was === true){
        switch(val.length){
            case 3:
                if(e.charCode !== 0){
                this.value += "-";
                }
                break;
            case 6:
                if(e.charCode !== 0){
                this.value += "-";
                }
                break;
            default:
                if(val.length > 10 && e.charCode !== 0){return false;};
                break;

        };
        val += e.charCode;
    }
    else{
        return false;
    };

};
</script>
</body>