为什么只有我的一些 javascript 函数有效

Question

我正在使用 javascript 和 ajax 来验证注册表单，此时函数 restrict(elem) 和函数 checkusername() 似乎正在工作，ajax 正在将 checkusername 变量传递给 PHP 并检查用户名是否存在并且向我显示一条消息，说明用户名已使用或可用，但没有其他字段得到验证，这是我的 javascript

javascript验证客户端b4去php

function restrict(elem) {
    var tf = _(elem);
    var rx = new RegExp;
    if (elem === "email") {
        rx = /[' "]/gi;
    } else if (elem === "username") {
        rx = /[^a-z0-9]/gi;
    } else if (elem === "mobileNumber") {
        rx = /[0-9]/g;
    }
    tf.value = tf.value.replace(rx, "");
}

function emptyElement(x) {
    _(x).innerHTML = "";
}

function checkusername() {
    var u = _("username").value;
    if (u !== "") {
        _("unamestatus").innerHTML = 'checking ...';
        var ajax = ajaxObj("POST", "signup.php");
        ajax.onreadystatechange = function () {
            if (ajaxReturn(ajax) === true) {
                _("unamestatus").innerHTML = ajax.responseText;
            }
        };
        ajax.send("usernamecheck=" + u);
    }
}

function signup() {
    var u = _("username").value;
    var e = _("email").value;
    var m = _("mobileNumber").value;
    var p1 = _("pass1").value;
    var p2 = _("pass2").value;
    var ci = _("city").value;
    var pc = _("postcode").value;
    var c = _("country").value;
    var d = _("dateOfBirth").value;
    var g = _("gender").value;
    var status = _("status");
    if (u === "" || e === "" || p1 === "" || p2 === "" || c === "" || g === "" || m === "" || ci === "" || pc === "" || d === "") {
        status.innerHTML = "Fill out required fields";
    } else if (p1 !== p2) {
        status.innerHTML = "Your password fields do not match";
    } else if (m !== 11 && !IsNumeric(m)) {
        status.innerHTML = "Please enter valid mobile number";
    } else if (d === "dd/mm/yyyy") {
        status.innerHTML = "Please enter your date of birth";

    } else {
        //ajax to send form data to php
        //hides sign button
        _("signupbtn").style.display = "none";
        status.innerHTML = 'please wait ...';
        //wait until php verifies data
        var ajax = ajaxObj("POST", "signup.php");
        ajax.onreadystatechange = function () {
            if (ajaxReturn(ajax) === true) {
                //if sign not succesful unhide button
                if (ajax.responseText !== "signup_success") {
                    status.innerHTML = ajax.responseText;
                    _("signupbtn").style.display = "block";
                } else {
                    window.scrollTo(0, 0);
                    _("signupform").innerHTML = "OK " + u + ", check your email inbox and junk mail box at <u>" + e + "</u> in a moment to complete the sign up process by activating your account. You will not be able to do anything on the site until you successfully activate your account.";
                }
            }
        };
        ajax.send("u=" + u + "&e=" + e + "&p=" + p1 + "&c=" + c + "&g=" + g + "&ci" + ci + "&m" + m + "&pc" + pc + "&d" + d);
    }
}

这是我的表格

  <form name="signupform" id="signupform" onsubmit="return false;">
     <div>Username: </div>
    <input id="username" type="text" onblur="checkusername()" onkeyup="restrict('username')" maxlength="16">
    <span id="unamestatus"></span>
    <div>Email Address:</div>
    <input id="email" type="email" onfocus="emptyElement('status')" onkeyup="restrict('email')" maxlength="88">
    <div>Create Password:</div>
    <input id="pass1" type="password" onfocus="emptyElement('status')" maxlength="16">
    <div>Confirm Password:</div>
    <input id="pass2" type="password" onfocus="emptyElement('status')" maxlength="16">
     <div>First name:</div> 
     <input id="firstName" type="text"  /><br />
     <div>Last name:</div> 
     <input id="lastName" type="text"   /><br />
     <div>Mobile number*:</div>
     <input name="mobileNumber" onfocus="emptyElement('status')" onkeyup="restrict('mobileNumber')" maxlength="16">
    <div>Gender:</div>
    <select id="gender" onfocus="emptyElement('status')">
      <option value=""></option>
      <option value="Male">Male</option>
      <option value="Female">Female</option>
    </select>
    <div>Country:</div>
    <select id="country" onfocus="emptyElement('status')">
      <?php include_once("country_list.php"); ?>
    </select>
    <div>City:</div>
    <input id="city" onfocus="emptyElement('status')">
    <div>Postcode:</div>
    <input id="postcode" onfocus="emptyElement('status')">
    <div>Relationship Status*:</div>
    <select id="relationshipStatus" >
        <option value=""></option>
        <option value="Single">Single</option>
        <option value="Taken">Taken</option>            
                </select>
    <div>Date of Birth*:</div>
    <input id="dateOfBirth" type="date" onfocus="emptyElement('status')">
    <button id="signupbtn" onclick="signup()">Create Account</button>
    <span id="status"></span>
  </form>

Answer 1

你的验证正则表达式不会做你想做的事：

function restrict(elem) {
    var tf = _(elem);
    var rx = new RegExp;
    if (elem === "email") {
        rx = /[' "]/gi;
    } else if (elem === "username") {
        rx = /[^a-z0-9]/gi;
    } else if (elem === "mobileNumber") {
        rx = /[0-9]/g;
    }
    tf.value = tf.value.replace(rx, "");
}

您的表达式已设置为如果字段值中的任何单个字符与字符范围匹配，它们将通过验证。您可以规定整个字符串由来自特定范围的字符组成，如下所示：

rx = /^[a-z0-9]*$/;