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

时间:2020-09-16 09:07:21

标签: javascript jquery asp.net-mvc validation razor-pages

我添加了电子邮件地址和contactno验证,但是都无法正常工作

我输入此电子邮件地址,然后成功插入数据库:

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>   

enter image description here

弹出警报后,按按钮,然后将数据(asd电子邮件地址)成功存储在数据库中

我正在尝试什么:

我正在尝试单击按钮,但还是没有效果

<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>

1 个答案:

答案 0 :(得分:0)

此版本的代码可以正常工作:

$(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;

    }
  })
});

您正在验证正则表达式中的错误变量,并且(在问题的原始版本中)在实际提交表单时未运行验证。