Question

我这里共有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>

Answer 1

你复制代码错误，你的功能测试（）错误}和alert('Please don't enter numbers ')错误＆＃39;不要。请更正代码！希望这有帮助！

Answer 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;
    }
}

希望这有帮助

Answer 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;
}

Answer 4

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

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

人们甚至可能想在他们的名字中添加元音或类似符号的重音符号，并且他们不会与仅查找字母表的正则表达式相匹配。这至少会使它成为口音：

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

我希望这会有所帮助。

关于验证文本框的说明

4 个答案: