没有警报的JavaScript表单验证

时间:2014-02-17 06:36:05

标签: javascript html

HTML表格

<!DOCTYPE html>
    <html lang="en">
      <head>
      </head>
      <body>
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>

    <div class="page-header">
      <h1 align="center" class="header">ONLINE ADMISSION FORM </h1>
    </div>


    <form role="form" method="post" name="sign_up_form" onSubmit=" return validateForm()">

    <div class="container">

    <div class="form-group">
        <label for="username">User Name</label>
        <input type="text" class="form-control" id="username" name="username" placeholder="Enter User Name">
      </div>
    <span id="usernameError"></span>  
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control"  id="email" name="email" placeholder="Enter email">
      </div>
      <span id="emailError"></span>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="password"  name="password" placeholder="Password">
      </div>
       <span id="passwordError"></span>
        <div class="form-group">
        <label for="exampleInputPassword1">Confirm Password</label>
        <input type="password" class="form-control" id="conf_password"  name="conf_password" placeholder="Confirm Password">
      </div>
       <span id="confError"></span>

      <input id="button" type="submit"  name="signup" value="Sign-Up" >

    </div>
    </form>


      </body>
    </html>

的JavaScript

<script type="text/javascript">
    function validateForm()
    {
    var username = checkUsername();
    var email = checkEmail();
    var password = checkPassword();
    var conf =  checkConf();
    }
    // Validate the fill in of First Name
    function checkUsername(){
    var userName=document.forms["sign_up_form"]["username"].value;
    if (userName==null || userName=="")
    {
    document.getElementById("usernameError").innerHTML = "Not a valid e-mail address";
    return false;
    }
    else{
    return true;
}

function checkEmail()
    {
    // code for email validation starts here
    var Email=document.forms["sign_up_form"]["email"].value;
    var atpos=Email.indexOf("@");
    var dotpos=Email.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=Email.length)
    {
    var error=document.forms["sign_up_form"]["emailError"].innerHtml="Not a valid e-mail address";
    return false;
    }
    else {
    return true;
    }
}
    //code for email validation ends here
    function checkPassword()
    {
    var Password=document.forms["sign_up_form"]["password"].value;

    if (Password==null || Password=="")
    {
    var error=document.forms["sign_up_form"]["passwordError"].innerHtml="Choose Password";
    }
    return false;
        else {
    return true;
    }
    }
    function checkConf()
    {
    var confirm_password=document.forms["sign_up_form"]["conf_password"].value;
    if(confirm_password==null ||  confirm_password=="")
    {
    var error=document.forms["sign_up_form"]["confError"].innerHtml="Confirm Password";
    return false;
    }
        else {
    return true;
    }
    }

</script>

这个JavaScript怎么了?为什么不显示错误消息?

2 个答案:

答案 0 :(得分:1)

你缺少一个结束支撑......

function checkUsername(){
   var userName=document.forms["sign_up_form"]["username"].value;
   if (userName==null || userName==""){
       document.getElementById("usernameError").innerHTML = "Not a valid e-mail address";
       return false;
   }
   else{
       return true;
   }               // missing this
}

答案 1 :(得分:0)

onSubmit=" return validateForm()"

不应该为S

大写
onsubmit=" return validateForm()"