个人中心
gpt4 book ai didi

javascript - 提交时不进入验证功能的表单

转载 作者：行者123 更新时间：2023-11-28 02:29:52 26 4
gpt4 key购买 nike

这是一个注册表单，在输入所有值后，validation() 必须验证输入，如果所有输入都有效，应该重定向到主页，但我的表单没有进入提交表单时的 Javascript 验证。

这是我的代码:

<!DOCTYPE html>
<html><head>
<style>
body {font-family: Arial, Helvetica, sans-serif;
background-color: black;}
* {box-sizing: border-box}

/* Full-width input fields */
input[type=text], input[type=password] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #C0C0C0;
}

input[type=text]:focus, input[type=password]:focus {
    background-color: #ffbf00;
    outline: none;
}

hr {
    border: 1px solid #000000;
    margin-bottom: 25px;
}

/* Set a style for all buttons */
button {
    background-color: #4CAF50;
    color: darkgreen;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 50%;
    opacity: 0.9;
}

button:hover {
    opacity:1;
}

/* Extra styles for the cancel button */
.cancelbtn {
    padding: 14px 20px;
    background-color: #f44336;
}


/* Add padding to container elements */
.container {
    padding: 16px;
    background-color: white;
}

/* Clear floats */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}



    .signupbtn {
       width: 50%;

    }

</style>

<script type="text/javascript">
function validation() {

    alert('in..');
    var uname = document.signup_form.username.value;
    var mail= document.signup_form.email.value;
    var num= document.signup_form.phone.value;
    var pass= document.signup_form.psw.value;
    var des= document.signup_form.desg.value;

    alert('validating...');
    if allLetter(uname){
    if ValidateEmail(mail){
    if check_phonenumber(num){
    if CheckPassword(pass){
    if desgselect(des){
    }
    }
    }
    }
    }
    return false;
    }

function allLetter(uname)
{ 
    alert('validating username');
    var letters = /^[A-Za-z]+$/;
    if(uname.value.match(letters))
        {
            alert('corret name');
            return true;
        }
    else
        {
            alert('Username must have alphabet characters only');
            uname.focus();
            return false;
        }
}

function ValidateEmail(mail) 
{
 if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(signup_form.email.value))
  {
    alert('valid mail ID');
    return (true)
  }
    alert("You have entered an invalid email address!");
    return (false)
}

function check_phonenumber(num)
{
  var phoneno = /^\d{10}$/;
  if((num.value.match(phoneno))
        {
        alert('valid phone number');
      return true;
        }
      else
        {
        alert("invalid phone number");
        return false;
        }
}

function CheckPassword(pass) 
{ 
var passw=  /^[A-Za-z]\w{7,15}$/;
if(pass.value.match(passw)) 
{ 
alert('Correct, try another...');
return true;
}
else
{ 
alert('Wrong...!');
return false;
}
}

function desgselect(des)
{
if(des.value == "Default")
{
alert('Select your designation from the list');
desg.focus();
return false;
}
else
{
alert('selected correct designation');
return true;
}
}

//}


</script>
</head>
<body>

<form name="signup_form" onsubmit="return validation()" action="main.html" method="post" style="border:1px solid #ccc">
  <div class="container">
    <h1><center>Sign Up</center></h1>
    <p><center>Please fill in this form to create an account.</center></p>
    <hr>
    <label for="username"><b>Name</b></label>
    <input type="text" placeholder="Enter your full name" name="username" required>
    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>
    <label for="phone"><b>Phone</b></label>
    <input type="text" id="phone" name="phone" placeholder="Enter your mobile number" required><br>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

   <label for="desg"><b>Designation</b></label>
   <select name="desg">
    <option selected="" value="Default">(Please select your designation)</option>
    <option value="am">Asst. Manager</option>
    <option value="dm">Department Manager</option>
    <option value="mm"> Mart Manager</option>
    <option value="sp">Sales Person</option>
    </select><br>

    <br><label><b>Gender</b>
      <input type="radio" name="gender" value="male" > Male
       <input type="radio" name="gender" value="female"> Female<br>
    </label>

    <p><center>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</center></p>

    <div class="clearfix" align="center">

      <button type="submit" class="signupbtn" onclick="validation(this.signup_form);"><b>Join Us</b></button>
    </div>
  </div>
</form>

</body>
</html>

我尝试了所有可能的方法，但我无法解决问题。

最佳答案

当您在表单中输入按钮类型 =“提交”时，您点击提交按钮将刷新页面。因此，即使执行了验证功能，您也看不到错误或成功消息。

您需要做的是通过验证方法中的 event.preventDefault() 或将按钮类型更改为按钮来防止此默认行为。

在您的情况下，将按钮 type="submit" 更改为 type="button"。

关于javascript - 提交时不进入验证功能的表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51526318/

26 4 0
文章推荐： javascript - 如何在 javascript 中创建通用工厂？
文章推荐： C++ 在结构初始化后释放内存？
文章推荐： 当我更改选项卡时，Javascript、Jquery 不起作用
文章推荐： c++ - 获取带指针的二维数组元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com