使用javascript reg表达式进行表单验证

时间:2017-04-16 22:26:27

标签: javascript html forms

所以,我有这个表格,所有表格都检查它们是否为空。但是,我无法获取reg表达式来验证名称是否使用了正确的语法。任何线索,为什么这是,将不胜感激!

<!DOCTYPE html>

<html>

<head>
    <title>TODO supply a title</title>


    <script>
        function validate() {
            var fName = document.getElementById("firstName");
            var lName = document.getElementById("lastName");
            var phone = document.getElementById("phone");
            var ad = document.getElementById("address");
            var city = document.getElementById("city");
            var zip = document.getElementById("zip");
            var birthdate = document.getElementById("birthdate");
            var user = document.getElementById("user");
            var pass = document.getElementById("pass");
            var relation = document.getElementById("relation");
            var nameExp = /^[a-zA-Z]+$/;

            if (fName.value == "") {
                fName.focus();
                fName.style.background = "red";
            }

            if (lName.value == "") {
                lName.focus();
                lName.style.background = "red";
            }
            if (phone.value == "") {
                phone.focus();
                phone.style.background = "red";
            }
            if (ad.value == "") {
                ad.focus();
                ad.style.background = "red";
            }
            if (city.value == "") {
                city.focus();
                city.style.background = "red";
            }
            if (zip.value == "") {
                zip.focus();
                zip.style.background = "red";
            }
            if (birthdate.value == "") {
                birthdate.focus();
                birthdate.style.background = "red";
            }
            if (user.value == "") {
                user.focus();
                user.style.background = "red";
            }
            if (pass.value == "") {
                pass.focus();
                pass.style.background = "red";
            }
            if (relation.value == "") {
                relation.focus();
                relation.style.background = "red";
                alert("All fields must be filled out!");
                return false;
            } else {
                return (true);

            }

            console.log(nameExp.test(document.getElementById.firstName.value));
            if (!nameExp.test(document.getElementById.firstName)) {
                alert("You need to enter a valid name");
                document.getElementById.firstName.focus();
                return false;
            }

            if (!document.getElementById.firstName.value.match(nameExp)) {
                alert("You need to enter a valid name");
                document.getElementById.firstName.focus();
                return false;
            }
            else
                console.log("This is correct");
            return (true);

        }
    </script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <form id="form" onSubmit="validate();" action="" method="post">
        <table>
            <tr>
                <td>Enter Name</td>
                <td><input id="firstName" type="text" name="firstName"> </td>
            </tr>
            <tr>
                <td>Enter Last Name </td>
                <td><input id="lastName" type="text" name="lastName">
            </tr>
            <tr>
                <td>Phone Number</td>
                <td><input id="phone" type="text" name="phone"> </td>
            </tr>
            <tr>
                <td>Address</td>
                <td><input id="address" type="text" name="address"> </td>
            </tr>
            <tr>
                <td>City</td>
                <td><input id="city" type="text" name="city"> </td>
            </tr>
            <tr>
                <td>State</td>
                <td class="selection">
                    <select name="state">
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="AZ">Arizona</option>
      <option value="AR">Arkansas</option>
      <option value="CA">California</option>
      <option value="CO">Colorado</option>
      <option value="CT">Connecticut</option>
      <option value="DE">Delaware</option>
      <option value="DC">District of Columbia</option>
      <option value="FL">Florida</option>
      <option value="GA">Georgia</option>
      <option value="HI">Hawaii</option>
      <option value="ID">Idaho</option>
      <option value="IL">Illinois</option>
      <option value="IN">Indiana</option>
      <option value="IA">Iowa</option>
      <option value="KS">Kansas</option>
      <option value="KY">Kentucky</option>
      <option value="LA">Louisiana</option>
      <option value="ME">Maine</option>
      <option value="MD">Maryland</option>
      <option value="MA">Massachusetts</option>
      <option value="MI">Michigan</option>
      <option value="MN">Minnesota</option>
      <option value="MS">Mississippi</option>
      <option value="MO">Missouri</option>
      <option value="MT">Montana</option>
      <option value="NE">Nebraska</option>
      <option value="NV">Nevada</option>
      <option value="NH">New Hampshire</option>
      <option value="NJ">New Jersey</option>
      <option value="NM">New Mexico</option>
      <option value="NY">New York</option>
      <option value="NC">North Carolina</option>
      <option value="ND">North Dakota</option>
      <option value="OH">Ohio</option>
      <option value="OK">Oklahoma</option>
      <option value="OR">Oregon</option>
      <option value="PA">Pennsylvania</option>
      <option value="RI">Rhode Island</option>
      <option value="SC">South Carolina</option>
      <option value="SD">South Dakota</option>
      <option value="TN">Tennessee</option>
      <option value="TX">Texas</option>
      <option value="UT">Utah</option>
      <option value="VT">Vermont</option>
      <option value="VA">Virginia</option>
      <option value="WA">Washington</option>
      <option value="WV">West Virginia</option>
      <option value="WI">Wisconsin</option>
      <option value="WY">Wyoming</option>
      </select>
                </td>
                <tr>
                    <td>Zip </td>
                    <td><input id="zip" type="text" name="zip"> </td>
                </tr>
                <tr>
                    <td>Birthdate</td>
                    <td><input id="birthdate" type="text" name="birthdate"> </td>
                </tr>
                <tr>
                    <td>Username</td>
                    <td><input id="user" type="text" name="userName"> </td>
                </tr>
                <tr>
                    <td>Password</td>
                    <td><input id="pass" type="text" name="password"> </td>
                </tr>
                <tr>
                    <td>Sex</td>
                    <td><input name="sex" type="radio" checked="checked" value="Male"> Male
                        <input name="sex" type="radio" id="mypassword" value="Female"> Female
                    </td>

                </tr>
                <tr>
                    <td>Relationship</td>
                    <td><input id="relation" type="text" name="relationship"> </td>
                </tr>

        </table>
        <input type="submit" name="submit" value="insert">
        <input type="submit" name="update" value="update">
        <input type="submit" name="search" value="search">
    </form>

</body>

</html>

2 个答案:

答案 0 :(得分:0)

问题在于您的返回值实际上并不在任何地方。变化:

#include <windows.h>
#include <tlhelp32.h>
#include <stdio.h>

BOOL EnableDebugPriv(HANDLE proc);

int main()
{
    HANDLE hSnapshot;

    HANDLE hThread;

    THREADENTRY32 thread32;

    DWORD dwPid     = 15404;

    EnableDebugPriv(OpenProcess(PROCESS_ALL_ACCESS, FALSE, dwPid));

    hSnapshot       = CreateToolhelp32Snapshot(TH32CS_SNAPTHREAD, dwPid);

    if(hSnapshot == INVALID_HANDLE_VALUE)
    {
        printf("Error getting snapshot: %lu\n", GetLastError());
        return 1;
    }

    thread32.dwSize = sizeof(THREADENTRY32);

    if(!Thread32First(hSnapshot, &thread32))
    {
        printf("Error thread32first\n");
        return 1;
    }

    printf("Thread Id: %lu\n", thread32.th32ThreadID);

    hThread = OpenThread(THREAD_ALL_ACCESS, FALSE, thread32.th32ThreadID);

    if(hThread == NULL)
    {
        printf("Error getting handle: %lu\n", GetLastError());
        return 1;
    }

    return 0;
}

BOOL EnableDebugPriv(HANDLE proc)
{
        HANDLE hToken;
        LUID sedebugnameValue;
        TOKEN_PRIVILEGES tkp;
        // pass our opened process handle
        OpenProcessToken(proc, TOKEN_ADJUST_PRIVILEGES | TOKEN_QUERY, &hToken);
        LookupPrivilegeValue(NULL, SE_DEBUG_NAME, &sedebugnameValue);
        tkp.PrivilegeCount = 1;
        tkp.Privileges[0].Luid = sedebugnameValue;
        tkp.Privileges[0].Attributes = SE_PRIVILEGE_ENABLED;
        if(AdjustTokenPrivileges(hToken, FALSE, &tkp, sizeof tkp, NULL, NULL))
        {
        CloseHandle(hToken);
        return TRUE;
        }
        else
        {
            MessageBox(NULL,"Bro, you gotta be an admin to set privs like this", "Shit", MB_OK);
            CloseHandle(hToken);
            return FALSE;
        }


}

分为:

<form id="form" onSubmit="validate();" action="" method="post">

答案 1 :(得分:0)

首先,document.getElementById.firstName应更改为document.getElementById("firstName")

这部分代码:

console.log(nameExp.test(document.getElementById("firstName").value));
if (!nameExp.test(document.getElementById("firstName").value)) {
  alert("You need to enter a valid name");
  document.getElementById("firstName").focus();
  return false;
}

应该在var nameExp = /^[a-zA-Z]+$/;之后添加,因为该函数对if / else条件(if (relation.value == ""))返回false / true,并且永远不会调用它下面的代码。

此外,return使用括号内容并不常见 - 只需使用return true;return false;

同样正如@NeatNit所说,您应该使用正确的onSubmit属性,如下所示:onSubmit="return validate();"