为什么此javascript验证无效？

Question

我有以下html代码

<form style="font-size:20px;border: 1px solid #666;font-face:'times new roman';">

        test <sub>TM</sub>
            <TABLE>

                <tr><td>Name</td><td><input type="text"name="name" id="num1"/></td></tr>

                <tr><td>E-mail id</td><td><input type="text" name="E-mail id" id="email" placeholder="abc@efg.com"/></td></tr>

                <tr><td><p>Address</p></td>
                    <div>

                        <td><textarea name="address" rows="5" cols="10" id="num3"></textarea>
                    </div>
                </tr>

                <tr><td>location</td><td><select name="location"><br>
                        <option value="kerala">kerala</option>
                        <option value="tamil nadu">tamil nadu</option></td></tr>
                        </select><br>
                <tr><td>Gender</td><td><input type="radio"name="gender" value="male">male</td></tr> <br>
                <tr><td></td><td><input type="radio"name="gender" value="female">female</td></tr><br>


                <tr><td><input type="checkbox"name="agree" value="I agree with the above information">I agree with the above information<br>
                <input type="button" value="LOGIN" onclick="letters()"/></td></tr>
            </table>
        </form>

以及以下javascript

<script type="text/javascript">
function letters() 
{
   var emailText = document.getElementById('email').value;
    //alert(emailText);
    var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*@[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;
    var x=document.getElementById("num1").value;
                //alert(x);
     var letters = /^[a-zA-Z]+$/ ;  

   if (pattern.test(emailText)==true && x.test(letters)==true) 
        {
                    alert("ok");
                    return true;
         }
    else
        {
                      alert("not ok");
                    return false;
        }
}
</script>

该脚本的作用是，单击按钮时将调用函数letters()并根据电子邮件和字母正则表达式验证输入字段。

但是为什么这不起作用呢？

我是javascript和html的新手，事实上我正在学习它。所以请帮助。

Answer 1

您能检查一下您的问题吗？

<input type="text" name="E-mail id" id="email" placeholder="abc@efg.com" id="num2">

两次id在代码的上面的字段中定义。

希望这个帮助

Answer 2

从提交按钮中删除onclick()函数

将其代替表格的第一行

<form style="font-size:20px;border: 1px solid #666;font-face:'times new roman';" onsubmit="return letters()">

还要在您的电子邮件字段中删除第二个ID

<input type="text" name="E-mail id" id="email" placeholder="abc@efg.com" **id="num2"**>

Answer 3

更改您的以下代码

if (pattern.test(emailText)==true && x.test(letters)==true) 

至

if (pattern.test(emailText)==true && letters.test(x)==true) 

检查这个小提琴