HTML开法与应用：利用Javascript对表单进行验证：

HTML开法与应用：利用Javascript对表单进行验证：

书写表单完，多表单的验证也是Javascript中最主要的内容。

两种提交按钮：

<input type="submit" onclick="shouInput()" value="提交" />
<button onclick="shouInput();">提交</button>

不管哪种提交按钮，最主要的是要利用“onclick”进行函数的调用。

需要验证的表单：

<table border="1px" bordercolor="#0000ff" width="600px" height="400px" cellpadding="0px" cellspacing="0px">
            <tr>
                <td align="right">用户名:</td><td><input type="text" name="" id="stuName" value="" /></td>
            </tr>
            <tr>
                <td align="right">密&nbsp;&nbsp;码:</td><td><input type="password" id="passwd" /></td>
            </tr>
            <tr>
                <td align="right">专&nbsp;&nbsp;业:</td><td><select id="profession"><option>——请选择——</option><option>电子</option><option>信息</option></select></td>
            </tr>
            <tr>
                <td align="right">性&nbsp;&nbsp;别:</td><td><input type="radio" name="gender" value="男" />男<input type="radio"name="gender" value="女" />女<input type="radio" name="gender" value="其他" />其他</td>
            </tr>
            <tr>
                <td align="right">兴&nbsp;&nbsp;趣:</td><td><input type="checkbox" name="hobby" id="" value="羽毛球" />羽毛球<input type="checkbox" name="hobby" id="" value="篮球" />篮球<input type="checkbox" name="hobby" id="" value="乒乓球" />乒乓球</td>
            </tr>
            <tr>
                <td><center><input type="submit" onclick="shouInput()" value="提交" /></center></td><td><center><input type="reset" name="" id="" value="重置" /></center></td>
            </tr>
        </table>

效果图：

Javascript中的代码：

第一步进行对对象的选取，分为id选取与name选取。

var stuNameInput=document.getElementById("stuName").value;
var passwdInput=document.getElementById("passwd").value;
var stuProfession=document.getElementById("profession").value;
var stuGender=document.getElementsByName("gender");
var stuHobby=document.getElementsByName("hobby");

单选：

需要利用循环语句，与选择语句。

var stuGender=document.getElementsByName("gender");
            var gender="";
                for(var i=0;i<stuGender.length;i++){
                    if(stuGender[i].checked){
                        gender=stuGender[i].value;
                        break;
                }
                }

多选：

var stuHobby=document.getElementsByName("hobby");
            var hobby="";
            for(var i=0;i<stuHobby.length;i++){
                if(stuHobby[i].checked){
                    if(hobby!=""){
                    hobby=hobby+","+stuHobby[i].value;}
                    else{
                    hobby=stuHobby[i].value;}
                }
            }

利用“document.write”进行提交：

document.write("用户名："+stuNameInput+"<br/>密码:"+passwdInput+"<br/>专业："+stuProfession+"<br/>性别："+gender+"<br/>爱好："+hobby);

效果图：

点击提交前：

点击提交后：