关于验证文本框的说明答案

【问题标题】：clarification on validating a textbox关于验证文本框的说明
【发布时间】：2014-07-24 08:46:54
【问题描述】：

我在这里总共有 6 个文本框，我为它们应用了不同的验证，但它们都不起作用。这是我的代码，有人可以帮我解决我哪里出错了。每个文本框都有不同的条件

1)它应该只接受字母

2)它应该只接受数字

3)它应该只接受电子邮件

4）如果您输入除字母以外的任何内容并按下提交按钮，该特定文本框的背景颜色将更改，它应该只接受字母

<!DOCTYPE>
<html>
<head> 
<title> Text Boxes </title>
<script>

function test(){

    if(form.alphabets.value == "") {
        alert('Please enter name');
        return false;
    } else {
        if (!form.alphabets.value.match(/^[a-zA-Z]+$/)) {
            alert("Please Enter only alphabets");
            return false;
        }
    }


    if(form.numbers.value == "") {
        alert('Please enter phone number ');
        return false;
    } else {
        if (!form.numbers.value.match(/^[0-9]+$/)) {
        form.numbers.value="";
        form.numbers.focus(); 
        alert("Please Enter only numbers");
        return false;       
        }
    }

    if(form.email.value == "") {
        alert('Please enter email ');
        return false;
    } else {
        if (!form.email.value.match(/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/) ) {
            form.email.value="";
            alert("Please Enter Valid email address");
            form.email.focus(); 
            return false;
        }   
    }

    if(form.alphabets1.value == "") {
        alert('Please don't enter numbers ');
        return false;
    } else {
        if (!form.alphabets1.value.match(/^[a-zA-Z]+$/)) {
            form.alphabets1.value="";
            form.alphabets1.focus(); 
            form.alphabets1.style.background="Red";
            alert("Please Enter only alphabets");
            return false;
        }

    }

function check()
{
var text = document.getElementById("txtarea_content").value;
if(text.length >= 4)
{

    alert('Length should not be greater than 4');
    return false;
} 
else 
{

return true;
}

}


function sum()
{
var txtFirstNumberValue = document.getElementById('txt1').value;
var txtSecondNumberValue = document.getElementById('txt2').value;
if (txtFirstNumberValue == "")
   txtFirstNumberValue = 0;
if (txtSecondNumberValue == "")
   txtSecondNumberValue = 0;

var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
    document.getElementById('txt3').value = result;

}
</script>


</head>


<body>

<form name="form" method ="post"> 
<table>     
    <tr>
        <td>Enter only Alphabets :</td>
        <td><input type="text"  name="alphabets" /></td>
    </tr>
    <tr>
        <td>Enter only Numbers :</td>
        <td><input type="text" name="numbers" /></td>
    </tr>
    <tr>
        <td>Enter your Email Address : </td>
        <td><input type="text" name="email"> </td>
    </tr>
    <tr>
        <td>Enter only alphabets</td>
        <td><input type="text" name="alphabets1"</td>
    </tr>

        <td>&nbsp;</td>




</table>

<button onclick="test();"> click me </button>

            <td><br></td>
            <td></br></td>

<div>
  Enter only 4 values : <input type="text" length="3" id="txtarea_content" onkeypress="return check();"> </textarea>
</div>


<tr>
        <td>Enter Two Numbers : <input type="text" id="txt1"  onkeyup="sum();" />
                <input type="text" id="txt2"  onkeyup="sum();" /> 
                </td>
        <td> Result :<input type="text" id="txt3" /></td>
</tr>

</form>
</body>
</html>

【问题讨论】：

标签： javascript css html validation

【解决方案1】：

您复制代码错误您的函数 test() 错误 } 和 alert('Please don't enter numbers ') 错误'在不要。请更正代码！希望对您有所帮助！

【讨论】：

【解决方案2】：

为什么不尝试获取他们的 id..这里是代码

var alpa = document.getElementById('alphabets');
if(alpa.value == "") {
    alert('Please enter name');
    return;
} else {
    if (!alpa.value.match(/^[a-zA-Z]+$/)) {
        alert("Please Enter only alphabets");
        return;
    }
}

希望这会有所帮助

【讨论】：

【解决方案3】：

问题就在这里。单引号（'）在中间不必要地结束。在那个地方使用双引号（“）。

不是这个

if(form.alphabets1.value == "") {
    alert('Please don't enter numbers ');
    return false;
}

使用这个

if(form.alphabets1.value == "") {
    alert("Please don't enter numbers ");
    return false;
}

【讨论】：

【解决方案4】：

正如 tuan huynh 所说，您忘记用 } 关闭函数测试语句。此外，您是否认为有些人最终会在名字中输入空格——例如，因为他们有两个名字？此正则表达式将接受这些空格（请记住 \w 与 a-zA-Z 相同）：

/^[\w|\s]+$/

人们甚至可能想在名字中的元音或类似符号上加上重音符号，但它们不会与只查找字母的正则表达式匹配。至少，这将使它适用于重音：

/^[\w|\s|á-úÁ-Ú|à-ùÀ-Ù]+$/

我希望这会有所帮助。

【讨论】：