[英]JavaScript - Forms - Validating numbers and email
I am not great with scripting or coding, so I'm really sorry if this is a silly question. 我不太擅长脚本编写或编码,因此,如果这是一个愚蠢的问题,我真的很抱歉。
I have a form: 我有一个表格:
<form name="userinfo" action="validform.html" method="post" onsubmit="return validateForm()">
<fieldset>
<legend>Personal Information</legend><br />
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="firstname">
<span id="firstname_required"></span><br />
<label for="surname">Surname:</label>
<input type="text" id="surname" name="surname">
<span id="surname_required"></span><br />
<label for="tel">Tel No:</label>
<input type="tel" id="tel" name="tel">
<span id="tel_required"></span><br />
<label for="email">Email:</label>
<input type="email" id="email" name="tel">
<span id="email_required"></span><br />
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<span id="password_required"></span><br />
<label for="submit"></label>
<input type="submit" value="Submit!">
</fieldset>
</form>
The form works great. 该表格效果很好。
I would like to validate the Tel No, so that only digits between 0-9 can be entered. 我想验证电话号码,以便只能输入0-9之间的数字。 I'm not worried about length or anything rock n roll like that.
我不担心长度或类似的摇滚乐。 I just want to make sure that users enter in numbers, then I can expand on that.
我只想确保用户输入数字,然后可以对此进行扩展。 Here is my code:
这是我的代码:
function validateNumber()
{
var a=document.forms["userinfo"]["tel"].value;
var patt=new RegExp("[0-9]");
if (a==null || a=="")
{
document.getElementById('tel_required').innerHTML="required";
}
else if (patt==null || patt !== RegExp )
{
document.getElementById('tel_required').innerHTML="numbers only allowed";
}
}
I suspect I have something fundamentally wrong in my else if statement ((patt==null || patt !== RegExp )) or that it's even constructed correctly, or that it should even be an else if statement!! 我怀疑我的else if语句((patt == null || patt!== RegExp))根本存在错误,或者它甚至构造正确,或者甚至应该是else if语句! But I can't even seem to get the logic quite right in my head.
但是我什至似乎无法完全理解我的逻辑。
Any help would be great. 任何帮助都会很棒。 Thanks, and again sorry if this is a silly question.
谢谢,如果这是一个愚蠢的问题,再次表示抱歉。
Here is the full JavaScript code I have so far: 这是到目前为止我拥有的完整JavaScript代码:
function validateForm()
{
var a=document.forms["userinfo"]["firstname"].value;
if (a==null || a=="")
{
document.getElementById('firstname_required').innerHTML="required";
}
var a=document.forms["userinfo"]["surname"].value;
if (a==null || a=="")
{
document.getElementById('surname_required').innerHTML="required";
}
validateNumber()
validateEmail()
var a=document.forms["userinfo"]["password"].value;
if (a==null || a=="")
{
document.getElementById('password_required').innerHTML="required";
return false;
}
}
function validateNumber()
{
var a=document.forms["userinfo"]["tel"].value;
var patt=new RegExp("[0-9]");
if (a==null || a=="")
{
document.getElementById('tel_required').innerHTML="required";
}
if (patt==null || patt !== RegExp )
{
document.getElementById('tel_required').innerHTML="numbers only allowed";
}
}
function validateEmail()
{
var a=document.forms["userinfo"]["email"].value;
var patt=new RegExp("/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/");
if (a==null || a=="")
{
document.getElementById('email_required').innerHTML="required";
}
}
If you are lucky enough to be HTML5, you might be able to get away with 如果您很幸运能够成为HTML5,则可以摆脱困境
<input type="number">
Try input type=number to see the HTML5 version in action. 尝试输入type = number以查看实际使用的HTML5版本。
else try below code 否则尝试下面的代码
function validateNumber()
{
var a=document.forms["userinfo"]["tel"].value;
if (a==null || a=="")
{
document.getElementById('tel_required').innerHTML="required";
}
else if (/[^\d]/.test(a))
{
document.getElementById('tel_required').innerHTML="numbers only allowed";
}
else {
document.getElementById('tel_required').innerHTML="input OK";
}
}
As Novocaine88 says, you should also allow spaces. 正如Novocaine88所说,您还应该留出空格。
if (!/[^\d ]/.test(a)) {
//OK
} else {
//not OK - contains character(s) other than numbers/spaces
}
Note the simpler method of declaring a regular expression, also, via the literal /pattern/
rather than the constructor. 请注意,也可以通过文字
/pattern/
而不是构造函数来声明正则表达式的更简单方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.