JavaScript表单验证中未识别“不等于”符号

3

请问有人能告诉我如何改进这段代码,最重要的是将我的电子邮件验证排序,以便在 Z 不等于空或字符串“Email”时在所有情况下正常工作。

所有字段都已经以适当的措辞开始,作为向客户展示的示例。

提前致谢。

function validateForm()
{
//Uses HTML field IDs
var x=document.forms["myForm"]["name"].value;
var y=document.forms["myForm"]["phone"].value;
var z=document.forms["myForm"]["email"].value;

//Name locator
    if (x==null || x=="" || x=="Name")
      {
      alert("Please enter the your name.");
      return false;
}

//Contact method locator
    if ((y==null || y=="" || y=="Phone Number")&&(z==null || z=="" || z=="Email"))
      {
      alert("Please enter a contact method.");
      return false;
}

//Phone numeric validation, this runs if Email field is not edited
    if (z==null || z=="" || z=="Email")
    {
    if (isNaN(y)||x.indexOf(" ")!=-1)
      {
      alert("Telephone must be a numeric value.");
      return false;
      }
}

//Phone length validation, this runs if Email field is not edited
    if (z==null || z=="" || z=="Email")
    {
    if (y.length > 14)
      {
      alert("Telephone must be valid.");
      return false;
        }
}

//Email validation, does not work, this should run only when something is entered into the field
    if (z!=null || z!="" || z!="Email")
    {
    var atpos=z.indexOf("@");
    var dotpos=z.lastIndexOf(".");
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=z.length)
      {
      alert("This is not a valid e-mail address");
      return false;
        }
    }
}

1
你尝试过在验证之前使用 alert(z) 来查看它的值吗? - DevlshOne
2
一些提示:a)如果变量不代表向量数据或类似数据,请永远不要将其命名为x,y,z。b)纠正您的缩进。c)保持您的代码DRY:创建一个函数来检查null""或给定值(例如“名称”,“电子邮件”,“电话号码”)。 - ComFreek
1
当z为null或空字符串或等于“Email”时,您的条件将为真。对于您来说不起作用吗?问题到底是什么?现在,如果您想改进,请使用占位符属性,那么您就不必检查“Email”了:http://www.w3schools.com/tags/att_input_placeholder.asp - Sergey Snegirev
谢谢回复,alert(z)返回“Email”,这是默认值。它无论如何都会运行该方法。我需要条件仅在z不等于null、空字符串或“Email”时才为真。 - user2707736
1
应该使用&&而不是||。 - Nigel B
4个回答

5

您可以做一些事情。

z==null || z=="" 可以替换为 !Boolean(z) 或者 !z

z!=null || z!="" 可以替换为 Boolean(z) 或者 !!z

除非您期望类型强制转换,否则应始终使用 === 而不是 ==。

因此,您对 z == "Email" 的检查可以更改为类似于以下内容的内容: z.toLowerCase() === "email"

看起来您重复了代码 --> z==null || z=="" || z=="Email"(x2)。您可以结合电话数字验证和电话长度验证。


2

请看这个验证代码(链接),它是jQuery和Javascript的结合体。它将为您提供有关应该查找什么以及如何处理典型表单的特定元素的一些极好见解(包括电子邮件地址的一个非常好的RegEx示例):

/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value)

1

如果您不想手动编写表单验证,是否考虑使用validate.js等工具呢?

示例代码:

var validator = new FormValidator('example_form', [{
    name: 'req',
    display: 'required',    
    rules: 'required'
}, {
    name: 'alphanumeric',
    rules: 'alpha_numeric'
}, {
    name: 'password',
    rules: 'required'
}, {
    name: 'password_confirm',
    display: 'password confirmation',
    rules: 'required|matches[password]'
}, {
    name: 'email',
    rules: 'valid_email'
}, {
    name: 'minlength',
    display: 'min length',
    rules: 'min_length[8]'
}], function(errors, event) {
    if (errors.length > 0) {
        // Show the errors
    }
});

1
改变:
if (z!=null || z!="" || z!="Email")

To this:

if (z!=null && z!="" && z!="Email")

你的验证应该全都是ANDs而不是ORs,因为在提交之前你希望所有这些条件都为真。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接