Fatal编程技术网
  • javascript/
  • Javascript 关于验证文本框的说明

Javascript 关于验证文本框的说明

javascript css html validation

Javascript 关于验证文本框的说明,javascript,css,html,validation,Javascript,Css,Html,Validation,我这里总共有6个文本框，我已经对它们应用了不同的验证，但没有一个有效。这是我的代码，有人能帮我找出哪里出了问题。 每个文本框都有不同的条件 1） 它应该只接受字母表 2） 它应该只接受数字 3） 它应该只接受电子邮件 4） 它应该只接受字母，若你们输入任何其他字母，然后按提交按钮，那个么特定文本框的背景颜色将改变 <!DOCTYPE> <html> <head> <title> Text Boxes </title> <scri

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


文本框
功能测试（）{
如果（form.alphabets.value==“”）{
警报（“请输入名称”）；
返回false；
}否则{
如果（！form.alphabets.value.match（/^[a-zA-Z]+$/）{
警告（“请只输入字母表”）；
返回false；
}
}
如果（form.numbers.value==“”）{
警报（“请输入电话号码”）；
返回false；
}否则{
如果（！form.numbers.value.match（/^[0-9]+$/）{
form.number.value=“”；
form.number.focus（）；
警报（“请只输入数字”）；
返回false；
}
}
如果（form.email.value==“”）{
警报（“请输入电子邮件”）；
返回false；
}否则{
如果（！form.email.value.match（/^[a-zA-Z0-9+-]+@[a-zA-Z0-9-]+\[a-zA-Z0-9-]+$/）{
form.email.value=“”；
警报（“请输入有效的电子邮件地址”）；
form.email.focus（）；
返回false；
}   
}
如果（form.alphabets1.value==“”）{
警报（“请不要输入数字”）；
返回false；
}否则{
如果（！form.alphabets1.value.match（/^[a-zA-Z]+$/）{
表格。字母表1。数值=”；
形式。字母表1。焦点（）；
form.alphabets1.style.background=“Red”；
警告（“请只输入字母表”）；
返回false；
}
}
函数检查（）
{
var text=document.getElementById（“txtarea\u content”）.value；
如果（text.length>=4）
{
警报（“长度不应大于4”）；
返回false；
} 
其他的
{
返回true；
}
}
函数和（）
{
var txtFirstNumberValue=document.getElementById（'txt1'）.value；
var txtSecondNumberValue=document.getElementById（'txt2'）.value；
如果（txtFirstNumberValue==“”）
txtFirstNumberValue=0；
如果（txtSecondNumberValue==“”）
txtSecondNumberValue=0；
var result=parseInt（txtFirstNumberValue）+parseInt（txtSecondNumberValue）；
document.getElementById（'txt3'）。值=结果；
}
仅输入字母：
仅输入数字：
输入您的电子邮件地址：
只输入字母表

为什么不试着获取他们的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;
    }
}



希望这将有助于
您复制代码错误您的函数测试（）错误
}
和
警报（'请不要输入数字'）
错误'。请更正代码！

希望这有帮助
 问题就在这里。单引号（′）在中间没有必要结束。在那个地方使用双引号（“）

而不是这个


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


用这个


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



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

人们甚至可能想在他们名字中的元音或类似符号上加上重音符号，但它们不会与只查找字母的regexp匹配。这至少会使重音符号：


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


我希望这有帮助


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