使用正则表达式破坏所有 JavaScript 的 JavaScript 验证

javascript validation with regex breaking all javascript

本文关键字:JavaScript 验证 正则表达式      更新时间:2023-09-26

我正在编写javascript来验证业务计算器/订单另一个队友写了数学代码,但是当我输入代码时,整个事情就停止了。我找不到我的错误(我更像是一个 css/html 人)帮助?

//Order Detail Variables//
var clientname =document.getElementById(clientname);
var phonenumber =document.getElementById(phoneno);
var deliveryaddress=document.getElementById(deliveryaddress);
var suburb =document.getElementById(suburb);
var postcode =document.getElementById(postcode);
var state =document.getElementById(state);
var deliverydistance = document.getElementById(deldistance);
var bagsordered =document.getElementById(bagsordered);
var orderdetailsarray = new Array();
//validation//
// these are boolean variables that when made true// 
//by the validation will allow the calculation and logging to occur//
var clientnamevalid = new Boolean(false);
//Regex Variables//
//these are the regex patterns that are used to //
//confirm that the data is valid//
var alpha = pattern=/^[a-zA-Z'-]+$/;
function validation()
    {
    function validation();
        {console.log (clientname);
        if(alpha.test(clientname));
        var clientnamevalid = true;
            if { clientnamevalid = true; 
                alert(client name valid); //to be replaced with inline alert
        }
            else {
                alert("client name invalid"); 
        }
    }

编辑更新的代码:

瓦尔现在是

var clientname =document.getElementById('clientname');

函数:

function validation()
        {console.log (clientname);
        var clientnamevalid = alpha.test(clientname);
        if(clientnamevalid);
        {
            alert('client name valid')  
        }
        else 
        {   
        alert("client name invalid");        
        }
    }

编辑更新的代码 2:

<button name="calculate" id="calcbutton" onclick="validate()"> Calculate </button>
function validate()

{console.log (clientname);
    var clientnamevalid = alpha.test(clientname);
    if(clientnamevalid);
    {
        alert('client name valid'); 
    }
    else 
    {   
    alert("client name invalid");        
    }
    if clientnamevalid = true;
    {   
        function calculateorder();
    }
}

编辑 3:

function validate()
        {console.log (clientname);
        var clientnamevalid = alpha.test(clientname);
        if(clientnamevalid);
        {
            alert("client name valid"); //edited from single quotations
        }
        else 
        {   
        alert("client name invalid");        
        }
        if (clientnamevalid == true);
        {   
            calculateorder();
        }
        else
        {
        alert ("please review form");
        }
    }

计算顺序功能:

function calculateorder()
    {
            orderdetailsarray [0] = document.forms["orderform1"] ["clientname"].value; 
            orderdetailsarray [1] = document.forms["orderform1"] ["phoneno"].value ;
            orderdetailsarray [2] = document.forms["orderform1"] ["deliveryaddress"].value;
            orderdetailsarray [3] = document.forms["orderform1"] ["suburb"].value;
            orderdetailsarray [4] = document.forms["orderform1"] ["postcode"].value;    
            orderdetailsarray [6] = parseFloat(document.forms["orderform1"] ["deldistance"].value);
            orderdetailsarray [7] = parseFloat(document.forms["orderform1"] ["bagsordered"].value);
            orderdetailsarray [8] = document.forms["orderform1"] ["orderdate"].value;
        //gross calculation 
        var grossbagcost = orderdetailsarray[7] * millendcost;
        grossbagcost = Math.round(grossbagcost *100)/100;
        document.forms["resultsform"] ["bagsgross"].value = grossbagcost;
        //end gross calculation
        //discount amount calculation
        if (orderdetailsarray [7] <=50)
        {
            var discountedbagcost = grossbagcost * discountnil;
            document.forms["resultsform"] ["discount"].value = discountedbagcost;
        }
        else if (orderdetailsarray[7] >50 && orderdetailsarray[7] <100)
        {
            var discountedbagcost = grossbagcost * discount4percent;
            discountedbagcost = Math.round(discountedbagcost *100)/100;
            document.forms["resultsform"] ["discount"].value = discountedbagcost;
        }
        else if (orderdetailsarray[7] >=100)
        {
            var discountedbagcost = grossbagcost * discount7percent;
            discountedbagcost = Math.round(discountedbagcost *100)/100;
            document.forms["resultsform"] ["discount"].value = discountedbagcost;
        }

使用空检查更新的代码

function validate()
    {console.log (clientname);
        //pattern test
        var clientnamevalid == alpha.test(clientname);
        if(clientnamevalid);
        {
            alert("client name valid");
        }
        else 
        {   
            alert("client name invalid");   
        //null check    
        }   
        if (x==null || x=="")
        {
            alert("Client name cannot be left blank");
                clientnamenotnull == false;
        }
        else
        { 
            clientnamenotnull == true;
        }
        //is the whole form valid
    {
        if (clientnamevalid == true)
        if (clientnamenotnull) == true)
        {   
            calculateorder();
        }
        else
        {
        alert ("please review form");
        }
    }

这似乎是问题区域:

function validation()
    {
    function validation();

你在另一个函数中具有函数。

你的函数validation()是一个大错误。你的意思是

function validation(clientname)
{
    console.log (clientname);
    var clientnamevalid = alpha.test(clientname);
    if (clientnamevalid)
    {
        alert('client name valid');
    }
    else
    {
        alert("client name invalid"); 
    }
}

而且您不会在代码中调用该函数。请记住,括号和大括号的位置确实很重要。

另一个,添加到anubhava的答案中,您需要将所有getElementById从

document.getElementById(deldistance);

document.getElementById('deldistance');

除了anubhava和Surender,document.getElementById()得到字符串..所以你需要改变这一切

//Order Detail Variables//
var clientname =document.getElementById(clientname);
var phonenumber =document.getElementById(phoneno);
var deliveryaddress=document.getElementById(deliveryaddress);
var suburb =document.getElementById(suburb);
var postcode =document.getElementById(postcode);
var state =document.getElementById(state);
var deliverydistance = document.getElementById(deldistance);
var bagsordered =document.getElementById(bagsordered);

并在引号之间写入参数。

例如:

var bagsordered = document.getElementById('bagsordered');

因为当你写它时,它会混淆编译器。您不能将您现在刚刚声明的变量传递到您想要他的 ID 的同一行。

如果你是一个CSS/HTML人,你知道当你创建一个HTML按钮或div您可以定义他的 ID。

喜欢<input type="button" id="order" value="press to order" />

现在在 JavaScript 中,您可以向此按钮添加功能。 所以当你想得到这个按钮在javaScript中你可以使用函数document.getElementById('order')

看?我给出了在 html 代码中声明的按钮的 ID。

希望你明白我的意思

编辑

看,当你有一个按钮时,正如你所说。 例如,我将使用我之前写的按钮。

<input type ="button" id="order" value="press to order"/>

现在,如果我有一个名为"函数()"的函数;我希望当用户按下按钮时,该函数将被调用所以我将添加到按钮的 html 代码中 onclick

所以现在它将是:

<input type = "button" id="order" value ="press to order" onclick="function()"/>

现在,当用户单击该按钮时,将调用该函数并执行其中的代码

此外,当您编写将更改某些标签或按钮文本的函数时。您需要获取他们的身份证。如果我的函数是"changeText()"。我有一个值为"Hello"和 id = "btn"的按钮我想将按钮值从"你好"更改为"哇"所以我需要正确设置那个按钮?

我该如何获得它?使用方法document.getElementById

这是代码:

function changeText()
{
   var btn = document.getElementById('btn');
   btn.value = "wow";
}

编辑 2:客户端名称有效是布尔值,对吧?

因此,当您要检查它是真还是假时,可以使用 if 语句。

if (clientnamevalid == true)
{  
    // do something, like call to calculateorder
    calculateorder();
} 
else // it's false
{
     // do something else
}

请注意,您不必将"clientnamevalid"变量或所有其他布尔变量与"true"或"false"进行比较,if 语句单独执行此操作。 所以你可以写

if (clientnamevalid) // means that the clientnamevalid is true
{
     calculateorder(); 
}
else
{
    // do something else
}

编辑3:** 从哪里获得客户端名称?!您需要允许用户输入其姓名。 所以你需要一个表格..**

function validate()
{   
    console.log (clientname);
    if (clientname != ""  || clientname != null)
    {
         var clientnamevalid = alpha.test(clientname);
         if(clientnamevalid)
         {
             alert("client name valid");
             calculateorder();
         } 
         else 
         {   
             alert("client name invalid, please review form");
         }
   }
   else
   {
        alert("client name can't be empty!");
   }
}