HTML开发与应用：用Javascript实现提交功能（表单验证）

HTML开发与应用：用Javascript实现提交功能（表单验证）。

之前我们已经实现过表单的input输入功能，但是并没有实现其中按钮的“提交”功能，而在HTML中想要实现这类功能就要使用到Javascript,而表单的验证也是JS中最为常见的功能，所以接下来我们来初步研究如何实现表单的验证功能。

在Javascript中实现函数的调用。

首先我们应该考虑到用户通过点击“提交”按钮来实现表单的验证，那么引入一个函数就再合适不过了，那么在JS中写一个函数，通过button(input)标签中的onclick属性标签来进行函数的调用，这一切看起来就很合理了。
那么下面我们来看这一标签的实例：

<input type="submit" onclick="shouInput()" value="提交" />      
<button onclick="shouInput();">显示输入内容button>

以上两个例子就是input与button实现的提交按钮调用函数，两者分别利用onclick来调用函数shouInput。下面我们就来好好研究这个函数。

在Javascript中书写验证表单的函数。

首先调用函数的思路很简洁，总体来说就是先定义一个变量找出你所对应的文本框，然后在定义一个变量代表用户所输入的值，亦或是直接在后面加上”.vlaue”,来取出其输入框所输入的值。

先举例一个form表单及其代码：

<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">密  码:td><td><input type="password" id="passwd" />td>
            tr>
            <tr>
                <td align="right">专  业:td><td><select id="profession"><option>——请选择——option><option>电子option><option>信息option>select>td>
            tr>
            <tr>
                <td align="right">性  别: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">兴  趣: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>

其网页的效果图：

从代码也可看出，这其中包括input中type为“text”，“password”，“radio”，“checkbox”，和一个select标签。当然对于这个也有难易之分，我们先来看简单的。也就是“text”，“password”，“select”。

先来实现选取对象工作：

这个对于所有type来说都是一样的，只是有name与id的区分。先看一段代码：

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");

从上述表单中的代码可以看出是单选多选，也就是“radio”，“checkbox”都是以name命名的。应为他有多个可选择的对象，不止一个，所以不能用id。
而这其中“text”，“password”，“select”较为简单，也就是选取多项后，再加一个“.value”就可以实现对其中元素的选取。而单选与多选不一样，也就是“radio”，“checkbox”，与其他不一样，想要实现，则需要用的循环语句，和选择语句。

单选：

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

这里是性别的选择，也就是说只选出一个，那么就在if后面有一个break，来跳出循环，终止循环。其中“gender”是用来存放这些value的所定义出来的变量，也为了结尾处“document.write（）”打印做准备。

多选：

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

多选与单选类似，不同在于一个“hobby=hobby+”,”+stuHobby[i].value;”因为是多选，并且要在每个选择元素有分隔“，”，那么这行代码就能很好的实现它。

以“document.write（）”进行打印：

综合上述所有表单，有打印程序：

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

提交后：

用Javascript实现提交功能（表单验证）到这里就结束了，想要获得更多内容请关注我哦。