资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

如何使用JavaScript进行表单校验功能-创新互联

这篇文章主要介绍如何使用JavaScript进行表单校验功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

成都创新互联公司主营沧县网站建设的网络公司,主营网站建设方案,成都App定制开发,沧县h5微信小程序搭建,沧县网站营销推广欢迎沧县等地区企业咨询

文本框校验

以下是文本框的校验步骤。

1.获取待校验的文本框value值,

2.对value值设置判定条件,使用if语句或switch语句实现。

3. 若满足条件,则校验通过,返回值为true。

4. 若不满足条件则返回值为false,替换文本输出校验的提示信息。

5. 表单获取多个验证的返回值,做逻辑运算,将参数传递给表单form的onsubmit事件。

6. 在input中调用校验函数,我使用的是onblur事件触发校验函数。

下拉框校验

下拉框的校验相比文本框略有不同,下拉框中option的返回值为value,由select中的name值获取到用户的选择,因此在下拉框的校验函数中通过id获取到select中的value,在根据value值是否为空或为其余的非法值而进行不同的判断,其余的步骤也与文本框相同。

表单校验样式如下:

如何使用JavaScript进行表单校验功能 
如何使用JavaScript进行表单校验功能 
如何使用JavaScript进行表单校验功能

遇到的问题

  • 校验表单时出现问题但表单仍然能够提交?

  • 原因:onsubmit事件作为一个提交动作有一个默认的参数,这个参数的默认值为true,前面提到如果满足条件要求就返回true否则返回false,每一项的校验中都要设置一个布尔类型的返回值,如果所有的校验全部通过才能正常提交表单,只要有一项不满足条件也不能提交表单而需要重新输入,因此需要对每一项校验函数的返回值做一个逻辑运算,全为真则最终返回给onsubmit的值为true,否则为false,而onsubmit的参数为false则无法提交,故实现了表单校验失败时阻止提交。

  • 一开始输入错误的内容,在修改变成正确的内容之后提示仍然为之前的提示?

  • 原因:在返回值为true时,将输出提示信息的文本内容置为空,即document.getElementById(“什么什么”).innerHTML=”“;

  • onchange和onblur事件都可以用来触发校验,并且两者都会在失去焦点之后实现校验,但onblur触发校验时有可能会由于用户间断输入而提示输入内容不符合要求。

  • 表单校验的js代码段不能等页面都加载完成之后加载。

代码块

以下为程序源码: