js提交form表单

时间：5年前阅读：5971

提交form表单的时候瑶族一些简单的验证，验证完后才能提交，避免无效提交。

当输入用户名和密码为空的时候，需要判断。这时候就用到了校验用户名和密码，这个需要在前端页面写；有两种方法，一种是用submit提交。一种是用button提交。

表单提方法:

1、submit按钮，结合form标签的onsubmit事件 <form name="form1" method="post" action="login.php" onsubmit="return checkForm()" > </form> checkForm()需要return

2、submit按钮，结合onclik事件。 <input type="submit" value="提交表单" onclick="return checkForm()" /> checkForm()需要return

3、button按钮，结合onclik事件， <input type="button" value="提交表单" onclick="return checkForm()" /> js中：checkForm(){document.form1.submit();} 不需要return

实例代码：表单简单验证：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
</head>
<body>
<form action="login.php" name="form1" method="post" onsubmit="return checkForm()">
    <table width="600" border="1" bordercolor="#ccc" rules="all" align="center" cellpadding="5">
        <tr>
            <th colspan="3" bgcolor="#0f0f0f">用户登录</th>
        </tr>
        <tr>
            <td width="80" align="right">用户名:</td>
            <td><input type="text" name="userName" onfocus="onfocus_userName()" onblur="onblur_userName"/></td>
            <td width="350"><div id="result_username"></div></td>
        </tr>
        <tr>
            <td width="80" align="right">用户密码:</td>
            <td><input type="text" name="userPwd" onfocus="onfocus_userPwd()" onblur="onblur_userPwd"/></td>
            <td width="350"><div id="result_userPwd"></div></td>
        </tr>

        <tr>
            <td></td>
            <td colspan="2"><input type="submit" value="提交表单"/></td>
        </tr>
    </table>
</form>
<script type="text/javascript">
    /*用户名*/
    //获取焦点:当光标接入某个文本框时触发
    function onfocus_userName(){
        /*获取id=result_username的元素对象*/
        var divObj=document.getElementById("result_username");
        /*写入提示信息*/
        divObj.innerHTML="请输入您的用户名:";
        divObj.style.color="#ccc";
    }
    //失去焦点:当光标离开某个文本框时触发
    function onblur_userName(){
        /*获取name=userName和id=result_username的元素对象*/
        var inputObj=document.form1.userName;
        var divObj=document.getElementById("result_username");
        /*用户名验证*/
        if(document.form1.userName.value=""){
            divObj.innerHTML="对不起,用户名不能为空";
            divObj.style.color="red";
            return false;
        }else if(document.form1.userName.value.length<5||document.form1.userName.value.length>20){
            divObj.innerHTML="用户名长度必须介于5-20个字符之间";
            divObj.style.color="red";
            return false;
        }else{
            divObj.innerHTML="ok";
            return true;
        }
    }

    /*用户密码*/
    //获取焦点:当光标接入某个文本框时触发
    function onfocus_userPwd(){
        /*获取id=result_userPwd的元素对象*/
        var divObj=document.getElementById("result_userPwd");
        /*写入提示信息*/
        divObj.innerHTML="请输入您的密码:";
        divObj.style.color="#ccc";
    }
    //失去焦点:当光标离开某个文本框时触发
    function onblur_userPwd(){
        /*获取name=userPwd和id=result_userPwd的元素对象*/
        var inputObj=document.form1.userPwd;
        var divObj=document.getElementById("result_userPwd");
        /*用户密码验证*/
        if(document.form1.userPwd.value=""){
            divObj.innerHTML="对不起,密码不能为空";
            divObj.style.color="red";
            return false;
        }else if(document.form1.userPwd.value.length<5||document.form1.userPwd.value.length>20){
            divObj.innerHTML="密码长度必须介于5-20个字符之间！";
            divObj.style.color="red";
            return false;
        }else{
            divObj.innerHTML="ok";
            return true;
        }
    }
    function checkForm(){
        var flag_userName=onblur_userName();
        var flag_userPwd=onblur_userPwd();
        if(flag_userName&&flag_userPwd){
            /*提交表单*/
            return true;
        }else{
            //阻止表单提交
            return false;
        }
    }
</script>
</body>
</html>

输出：

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

js提交form表单

网友评论