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">密&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>

其网页的效果图:这里写图片描述

从代码也可看出,这其中包括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;i<stuGender.length;i++){
                    if(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;i<stuHobby.length;i++){
                if(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+"<br/>密码:"+passwdInput+"<br/>专业:"+stuProfession+"<br/>性别:"+gender+"<br/>爱好:"+hobby);

提交后:
这里写图片描述
用Javascript实现提交功能(表单验证)到这里就结束了,想要获得更多内容请关注我哦。

  • 5
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值