When submitting a form, we need to validate the value of input boxes and text fields. We can write onSubmit events, codes and trampled holes for form.

1. Form onSubmit events are triggered only by submitting a form through <button type="submit"> submission </button> in the form. Form onSubmit events are not triggered if form submission is made through button onclick events.
2. The correct way to write onSubmit events is: <form action="" method="post" onsubmit="return checkFrom();">Note that writing return does not work.

function checkFrom(){
    var username=$('#username').val();
    alert(username);
    var pwd=$('#pwd').val();
    if(username==null || username==""){
        $('#codeInfo').html("enter one user name");
        $('#username').focus();
        return false;
    }else if(pwd==null || pwd==""){
        $('#codeInfo').html("Please input a password");
        $('#pwd').focus();
        return false;
    }else{
        return true;
    }

}

3. HTML5, input provides many new types, which saves us the time of writing JavaScript regular expressions to limit the type of input values, such as number, email, tel, etc., indicating that we need to enter legitimate numbers, mailboxes, phone numbers, etc. But I found that when type is set to number and it accepts only the input of the number, two triangles appear to adjust the size of the number (plus 1 minus 1).

Obviously, there are occasions where we don't need them to affect our aesthetics. We can use the following methods to remove them.

<style type="text/css">
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    margin: 0; 
}

input[type="number"]{-moz-appearance:textfield;}
</style>

4. Verification code is a common widget. To get the verification code and click refresh, we should pass a parameter to avoid getting the same verification code many times. At this time, we often consider the time stamp or random number. Here we use random number.

<div class="form-group input-group">                        
    <span class="input-group-addon" style="padding: 0px;">
    <img alt="Verification Code" src="<%=basePath %>code/verifyCode" title="Click Refresh Verification Code if you can't see clearly" style="cursor:pointer;"
     onclick="this.src='<%=basePath %>code/verifyCode?d='+Math.random();"></span>
    <input type="number" class="form-control" id="code"
    placeholder="Input Verification Code" onblur="validateCode(this.value)"/>
</div>

5. A comprehensive code

<style type="text/css">
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    margin: 0; 
}

input[type="number"]{-moz-appearance:textfield;}
</style>

<script type="text/javascript">
function checkFrom(){
    var username=$('#username').val();
    alert(username);
    var pwd=$('#pwd').val();
    if(username==null || username==""){
        $('#codeInfo').html("enter one user name");
        $('#username').focus();
        return false;
    }else if(pwd==null || pwd==""){
        $('#codeInfo').html("Please input a password");
        $('#pwd').focus();
        return false;
    }else{
        return true;
    }

}
</script>

Form form section:

<form role="form" action="" method="post" onsubmit="return checkFrom();">
    <hr />
    <h5>Enter Details to Login</h5>
    <br />
    <div class="form-group input-group">
        <span class="input-group-addon"><i class="fa fa-tag"></i></span>
        <input type="text" class="form-control" placeholder="Your Username " name="username" id="username" />
    </div>
    <div class="form-group input-group">
        <span class="input-group-addon"><i class="fa fa-lock"></i></span>
        <input type="password" class="form-control" placeholder="Your Password" name="pwd" id="pwd" />
    </div>
    <div class="form-group input-group">

        <span class="input-group-addon" style="padding: 0px;">
                <img alt="Verification Code" src="Getting the authentication code URL" title="Click Refresh Verification Code if you can't see clearly" style="cursor:pointer;"
                 onclick="this.src='Getting the authentication code URL?d='+Math.random();"></span>
        <input type="number" class="form-control" id="code" placeholder="Input Verification Code" onblur="validateCode(this.value)" />
    </div>
    <div class="form-group input-group">

        <span id="codeInfo" style="color: #f55"></span>

    </div>

    <div class="form-group">
        <label class="checkbox-inline"> <input type="checkbox" />
                                Remember me
        </label> 
        <span class="pull-right">
         <a href="index.html">Forget    password ? </a>
        </span>
    </div>

    <button type="submit" class="btn btn-primary ">Login Now</button>
</form>