onchange 事件在 mvc razor 页面中不起作用

Question

我正在添加一个电子邮件地址和一个未验证的联系人，但两者都不起作用。

我输入这个邮箱地址，然后成功插入数据库：

asda

我输入这个联系人号码，然后成功插入数据库：

1234

它给出了一个无效的警报，但问题是当我按下按钮然后成功插入数据库时​​。

.cshtml

@{
    ViewBag.Title = "Career";
}

<h2>Career</h2>

@using (Html.BeginForm("Career", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div class="row">
        <div class="col-md-12">
            <h3 style="text-align:center">Upload Form</h3>
        </div>
    </div>
    <br />
    <br />
    <div class="row">
        <div class="col-md-2">
            <label>EmailId:</label>
        </div>
        <div class="col-md-4">
            <input class="form-control" type="text" name="useremailid" placeholder="Please Enter EmailAddress" onchange="validateEmail()" required />
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-md-2">
            <label>ContactNo:</label>
        </div>
        <div class="col-md-4">
            <input class="form-control" type="number" name="usercontactno" placeholder="Please Enter ContactNo" onchange="validateContactNo()" title="Enter 10 digit mobile number" required />
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-md-2">
            <label>Resume:</label>
        </div>
        <div class="col-md-4">
            <input type="file" name="userresume" required />
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-md-2">
            <input class="btn bg-success" type="submit" value="Create" />
        </div>
    </div>
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">

    function validateEmail() {
        var text = document.getElementsByName("useremailid").value;
        var regx = /^([A-Za-z0-9_\-\.])+\@@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        if (regx.test(text))
            alert("valid");
        else
            alert("invalid");
    }

    function validateContactNo() {
        var text = document.getElementsByName("usercontactno").value;
        var regx = /\d{10}/;

        if (regx.test(text))
            alert("valid");
        else
            alert("invalid");
    }

</script>   

alert弹出后，按下按钮，将data(asd emailaddress)成功存入数据库。

我正在尝试什么：

我正在尝试单击按钮，但它也不起作用

<input class="form-control" type="text" name="useremailid" placeholder="Please Enter EmailAddress"  required />

<input class="form-control" type="number" name="usercontactno" placeholder="Please Enter ContactNo" required />

<input class="btn bg-success" type="submit" id="submit" value="Create" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $('#submit').click(function () {

                var emailid = document.getElementsByName("useremailid").value;
                var regx = /^([A-Za-z0-9_\-\.])+\@@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

            if (emailid) {
                if (regx.test(text))
                    alert("valid");
                else
                    alert("invalid");
            }

            var contactno = document.getElementsByName("usercontactno").value;
            var regx = /\d{10}/;

            if (contactno) {

                if (regx.test(text))
                    alert("valid");
                else
                    alert("invalid");
            }
        })
    });
</script>

我正在尝试提交表单，但它也不起作用

@using (Html.BeginForm("Career", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id = "frmsubmit" }))
{

  <input class="form-control" type="text" name="useremailid" placeholder="Please Enter EmailAddress" required />


      <input class="form-control" type="number" name="usercontactno" placeholder="Please Enter ContactNo" required />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#frmsubmit').submit(function () {

            var emailid = document.getElementsByName("useremailid").value;
            var regx = /^([A-Za-z0-9_\-\.])+\@@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

            if (emailid) {
                if (regx.test(text))
                    alert("valid");
                else
                    alert("invalid");
            }

            var contactno = document.getElementsByName("usercontactno").value;
            var regx = /\d{10}/;

            if (contactno) {

                if (regx.test(text))
                    alert("valid");
                else
                    alert("invalid");
            }
        })
    });
</script>

Answer 1

这个版本的代码可以正常工作：

$(document).ready(function() {
  $('#frmsubmit').submit(function() {

    var emailid = document.getElementById("useremailid").value;
    var regx = /^([A-Za-z0-9_\-\.])+\@@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

    if (emailid) {
      if (regx.test(emailid))
        alert("valid");
      else
        alert("invalid");
      return false;
    }

    var contactno = document.getElementById("usercontactno").value;
    var regx = /\d{10}/;

    if (contactno) {

      if (regx.test(contactno))
        alert("valid");
      else
        alert("invalid");
      return false;

    }
  })
});

您在正则表达式中验证了错误的变量，并且（在问题的原始版本中）在实际提交表单时没有运行验证。