1. javascript验证form表单数据的案例详解

     更新时间:2019年03月25日 14:08:13   作者:lay500   我要评论

    这篇文章主要介绍了javascript验证form表单数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    直接po截图和代码

    下面是CheckFormDemo.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>验证表单的案例</title>
    <link rel="stylesheet" type="text/css" href="../css/body.css" rel="external nofollow" />
    <script type="text/javascript" src="jsCheckDateDemo.js"></script>
    </head>
    <body>
    <h1>验证表单的案例</h1>
    <form name="form1" id="f1" action="../TestForm" method="get">
    姓名:<input type="text" name="userName" id="uName">
    <br/>
    年龄:<input type="text" name="age" id="uAge">
    <br/>
    密码:<input type="password" name="pwd" id="myPwd">
    <br/>
    重复密码:<input type="password" name="repeatPwd" id="myRepeatPwd">
    <br/>
    <!-- 
    虽然复选框设置了 name属性,但是如果复选框不选中,是不会提交到服务器端的,只
    有选中了的复选框,才会提交到服务器端
     -->
    爱好:<input type="checkbox" name="hobby" id="myHobby" value="football">足球
    <input type="checkbox" name="hobby" id="myHobby" value="badminton">羽毛球
    <input type="checkbox" name="hobby" id="myHobby" value="basketball">篮球
    <input type="checkbox" name="hobby" id="myHobby" value="billiards">台球
    <br/>
    备注:<textarea rows="3" cols="30" id="remarks"></textarea>
    <br/>
    <!-- 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值 -->
    测试字段:<input type="text" id="test" value="本文本框故意不设置name属性,看服务器端能不能接收到">
    <br/>
    <!-- 
    onclick="checkForm();"这句话中的;分号也可以省略不写,但是如果有多行js代
    码的话,那就要在每行js代码后面加上;分号,最后一行js代码后面可以不写;分号,也可以写上;分号
     -->
    <input type="button" value="js验证表单" onclick="checkForm();">
    <input type="submit" value="提交到servlet">
    </form>
    </body>
    </html>

    下面是jsCheckDateDemo.js

    /**
     * 
     */
     
    //验证表单数据
    function checkForm(){
    //	alert(document.form1.hobby.length);
    //	alert(document.getElementsByName("hobby").length);
    //	alert(document.getElementsByName("hobby")[0].value);
    //	alert(document.getElementById("myHobby"));
    	
    //	for (var i = 0; i < document.forms[0].hobby.length; i++) {
    //		alert("---" + document.forms[0].hobby[i].value);
    //	}
    	
    	var flag = false;
    	for (var i = 0; i < document.form1.hobby.length; i++) {
    //		alert(document.form1.hobby[i].value);
    //		alert(document.form1.hobby[i].checked);
    		if (document.form1.hobby[i].checked) {
    			flag = true;
    			break;
    		}
    	}
    	if (!flag) {//没有一个爱好被选中
    		alert("请至少选择一个爱好!");
    		//程序也没必要再往下走了,直接return
    		return;
    	}
    	if (document.forms[0].pwd.value.length < 8) {
    		alert("密码长度不能小于8位!");
    		document.forms[0].pwd.focus();//让密码框获取焦点
    		//程序也没必要再往下走了,直接return
    		return;
    	}
    	if (document.forms[0].pwd.value != document.forms[0].repeatPwd.value) {
    		alert("两次密码输入不一致!");
    		document.forms[0].repeatPwd.focus();//让重复密码框获取焦点
    		//程序也没必要再往下走了,直接return
    		return;
    	}
    	if (document.getElementById("remarks").value == "") {
    		alert("备注不能为空!");
    		/*
    这里可以不写return,因为程序执行到这里时,后面已经没有任何代码了,所
    以写不写return都无所谓,所以就不要写return了,写了反而让人觉得你是个新手,水平有点菜!
    		*/
    	}
    }
     
    

    以上所述是小编给大家介绍的javascript验证form表单数据详解整合,希望对大家有所帮助,如果大家有任?#25105;?#38382;请给我留言,小编会及时回复大家的。在此也非常?#34892;?#22823;家对脚本之家网站的支持!

    相关文章

    最新评论

    山东群英会开奖查询