几个很有用的javascript函数的具体实现(主要是对表单的验证）

最新推荐文章于 2025-10-24 13:08:38 发布
转载 最新推荐文章于 2025-10-24 13:08:38 发布 · 1.7k 阅读 · 0
文章标签：

#javascript #function #浏览器 #comments #action #html

本文介绍了一个使用JavaScript编写的留言簿程序，该程序包括了多个函数用于验证用户输入的数据，如姓名、电子邮件等，并通过电子邮件将收集到的信息发送给管理员。

函数Reset()按Reset按钮后对各字段的内容复位。

函数submitForms()按submit按钮后对字段合法性检查后发送电子邮件。
函数isName()对姓名字段进行合法性检查。
函数isEmail()对电子邮件地址字段进行合法性检查。

函数isBrowser()对浏览器字段与自动检测的浏览器版本进行比较。
函数isCountry()对国家字段进行合法性检查。
函数isComment()对意见字段进行合法性检查，不允许为空值。
函数isFavorite()对喜欢的站点字段进行合法性检查，不允许为空值。



　　程序中还提供了一些技巧，例如，如何判断浏览器的版本，字符串的操作等等。



　　结果是以电子邮件的形式提供给你的，里面有客人输入的各个字段。程序比较长，但不难看懂，下面是源代码：





<HTML>

<HEAD>

<TITLE>用JavaScript编制留言簿程序</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--Begin

//Someone@abc.com是你自己的电子邮件地址

var emailAddress="Someone@abc.com";

function toName()

{

var toNameval=document.forms[0].elements[1].value;

toNameval="mailto:Someone@abc.com?subject=GuestBookexample";

this.document.mail.action=toNameval;

}

function Reset(){

document.forms[0].elements[0].value="";

document.forms[0].elements[1].value="";

document.forms[0].elements[2].value=

navigator.appName+""+navigator.appVersion;

document.forms[0].elements[3].value="";

document.forms[0].elements[4].value="";

document.forms[0].elements[5].value="";

document.forms[0].elements[0].focus();

}

function submitForms(){

if((isName())&&(isEmail())&&(isBrowser())

&&(isCountry())&&(isComment())&&(isFavorite()))

if(confirm("/nYou'reabouttoe-mailtheform./n/nClick

onYEStosubmit./n/nClickonNOtoabort."))

{

alert("/nYoursubmissionwillnowbemadeto:

/n/n"+emailAddress+"/n/n/nThankyou!");

returntrue;

}

else

{

alert("/nYouhavechosentoabortthesubmission.");

return false;

}

else

returnfalse;

}

function isName(){

var str=document.forms[0].elements[0].value;

if(str==""){

alert("/nTheNAMEfieldisblank./n/nPleaseenteryourname.")

document.forms[0].elements[0].focus();

return false;

}

for(var i=0;i<str.length;i++)

{

var ch=str.substring(i,i+1);

if(((ch<"a"||"z"<ch)&&(ch<"A"||"Z"<ch))&&ch!='')

{

alert("/nTheNAMEfieldonlyacceptsletters

&spaces./n/nPleasere-enteryourname.");

document.forms[0].elements[0].select();

document.forms[0].elements[0].focus();

returnfalse;

}

}

returntrue;

}

functionisEmail()

{

emailAddress=document.forms[0].elements[1].value;

if(document.forms[0].elements[1].value==""){

alert("/nTheE-MAILfieldisblank.

/n/nPleaseenteryoure-mailaddress.")

document.forms[0].elements[1].focus();

returnfalse;

}

if(document.forms[0].elements[1].value.indexOf('@',0)==-1||

document.forms[0].elements[1].value.indexOf('.',0)==-1)

{

alert("/nTheE-MAILfieldrequiresa/"@/"

anda/"./"beused./n/nPleasere-enteryoure-mailaddress.")

document.forms[0].elements[1].select();

document.forms[0].elements[1].focus();

returnfalse;

}

else

{

toName();

return true;

}

}

function isBrowser()

{

if(document.forms[0].elements[2].value!

=navigator.appName+""+navigator.appVersion)

{

if(confirm("/nYou'vechangedyourbrowser

type./n/nClickonOKtokeepchanges./

n/nClickonCanceltorestoredetectedbrowser."))

return true

else

{

document.forms[0].elements[2].value=

navigator.appName+""+navigator.appVersion;

returntrue;

}

}

else

returntrue;

}

functionisCountry(){

varstr=document.forms[0].elements[3].value;

if(str==""){

alert("/nTheCOUNTRYfieldis

blank./n/nPleaseenteryourcountry.")

document.forms[0].elements[3].focus();

returnfalse;

}

for(vari=0;i<str.length;i++){

varch=str.substring(i,i+1);

if(((ch<"a"||"z"<ch)&&

(ch<"A"||"Z"<ch))&&ch!='')

{

alert("/nTheCOUNTRYfieldonlyaccepts

letters&spaces./n/nPleasere-enteryourcountry.");

document.forms[0].elements[3].select();

document.forms[0].elements[3].focus();

returnfalse;

}

}

returntrue;

}

functionisComment(){

if(document.forms[0].elements[4].value==""){

if(confirm("/nYou'reabouttosubmit

withoutleavingacomment./n/nClick

onCANCELtoincludeacomment./n/nClick

onOKtocontinuewithoutacomment."))

returntrue

else

{

document.forms[0].elements[4].focus();

returnfalse;

}

}

else

returntrue

}

functionisFavorite(){

if(document.forms[0].elements[5].value==""){

if(confirm("/nYou'reabouttosubmitwithout

listingyourfavoritesites./n/nClickonCANCEL

toincludefavorites./n/nClickonOKtocontinue

withoutlistingfavorites."))

returntrue

else

{

document.forms[0].elements[5].focus();

returnfalse;

}

}

else

returntrue

}

//End-->

</SCRIPT>

</HEAD>



<BODY>

<CENTER>

<FORMENCTYPE="text/plain"

NAME="mail"METHOD='GET'

ACTION='mailto:Someone@abc.com'

onSubmit="returnsubmitForms()">

<TABLEBORDER=0WIDTH=400>

<TR>

<TDalign="center"><FONTCOLOR=800000>

<STRONG>Enteryourname:</STRONG></FONT></TD>

<TDalign="center"><FONTCOLOR=800000>

<STRONG>Enteryoure-mailaddress:</STRONG>

</FONT></TD>

</TR>

<TR>

<TDalign="center"><INPUTTYPE="text"

NAME="name"SIZE=30MAXLENGTH=40></TD>

</TD>

<TDalign="center"><INPUTTYPE="text"

NAME="email"SIZE=30MAXLENGTH=40></TD>

</TR>

<TR>

<TDalign="center"><FONTCOLOR=800000>

<STRONG>Yourbrowser</STRONG></FONT></TD>

<TDalign="center"><FONTCOLOR=800000>

<STRONG>Enteryourcountry:</STRONG></FONT></TD>

</TR>

<TR>

<TDalign="center"><INPUTTYPE="text"

NAME="browser"SIZE=30MAXLENGTH=60></TD>

<TDalign="center"><INPUTTYPE="text"

NAME="country"SIZE=30MAXLENGTH=60>

</TD>

</TR>

</TABLE>

<CENTER>

<FONTCOLOR=800000><STRONG>

Leaveacommentorsuggestion:</strong></font><BR>

<TEXTAREANAME="comments"

ROWS=5COLS=50wrap=yes>Comments?

Suggestions?</TEXTAREA><P><P>

<FONTCOLOR=800000><STRONG>

Listyourfavoritesites:</STRONG></FONT><BR>

<TDalign="center"><TEXTAREANAME="favorites"

ROWS=5COLS=50wrap=yes>

AnysitesIshouldtakealookat?</TEXTAREA>

<P><P>

<INPUTTYPE="submit"VALUE="Submit">

<center><INPUTTYPE="reset"VALUE="Reset"

onClick="Reset()">

</FORM>

</CENTER>

</BODY>

</HTML>

 
先执行JS为true后,再提交form表单
CV_Di的博客
01-25 1332
大家都知道，一般的 JavaWeb 项目中，Servlet 从 JSP 获得的数据都是 String 类型，但是字符串是十分占内存的，同为了方便封装数据，有些时候需要将 String 类型转成 Int、Date 等。但如果从JSP获得的数据为Null时，Servlet中类型转换的操作就会出现异常。 因此，在写登陆注册页面时一般都需要先判断一下输入的数据是否符合要求，是否有未填项。此文就是介绍如何在form表单提交前先执行JS判断。
关于表单提交方式submit 直接提交 和button 加 js 提交方式以及涉及到的ajax兼容性问题的说明
wodexinhao的博客
06-20 510
     本人从来不发博客，这篇算是破例了，或许以后遇到有需要还会再发。为什么发这篇博文，是因为在csdn的问答栏目刚好遇到一个关于ajax提交表单的问题，看到有的朋友居然不懂装懂在误导别人，还死不承认错误。人非圣贤孰能无过，只要是人都会犯错误，都是在犯错误的过程中不断成长。犯错误不可怕，可怕的是犯了错误不承认错误。好了，废话不多说了，进入正题。     首先来说说submit表单提交的方式和bu...
用button提交表单php,JavaScript在form表单中使用button按钮实现submit提交方法
weixin_32597009的博客
03-11 1844
submit是button的一个特例，也是button的一种，它把提交这个动作自动集成了，submit和button,二者都以按钮的形式展现,看起来都是按钮，所不同的是type属性和处发响应的事件上。在form表单提交中，使用button来间接完成submit的提交更为灵活。下面是实现方法：使用button按钮实现submit提交，需要在button标签中的使用onclick方法，然后在JavaS...
提交表单时执行func方法
高性价比服务器就选：蓝易云
02-16 524
如果你想在提交表单时执行一个函数，可以使用JavaScript或jQuery。方法来处理表单提交事件。当用户点击提交按钮时，会执行一个函数，该函数阻止表单的默认提交行为（使用。在这个例子中，当用户点击提交按钮时，myFunction()函数将被执行。来阻止表单实际提交，这样我们就可以在JavaScript中处理提交事件。在这个例子中，我们使用jQuery的。），然后执行我们的代码。
自定义submit（）实现ajax提交form表单不刷新跳转
方块♦的博客
08-24 7954
问题描述： 1.最近一直在为用户信息完善功能所困惑，想要实现：用户提交信息后不跳转到acction()的服务端页面，只要告诉提交成功即可。 2.论坛上大多ajax+json等方法/框架（$ajaxform）都需要导入包或者js文件，本人新手 ，对于导包的方法和引用js的路径问题等方面不擅长，从早上开始纠结了一天，始终点击提交按钮依然是没有反应，并不会执行ajax+json实现的提交form...
JavaScript实现仿网易通行证表单验证
10-24
下面，我将从这几个方面详细介绍表单验证的具体实现方法和知识点。 首先，表单验证通常指的是在用户填写完信息并提交之前，通过编写脚本或使用HTML5的内建验证属性来检查用户输入的数据是否符合要求的过程。这样做...
使用JavaScript实现一个“表单验证”的功能.rar
11-25
表单验证通常包括以下几个方面：验证字段的必填性、格式校验、数据范围校验、自定义规则校验等。JavaScript提供了多种方法来实现这些功能，包括使用正则表达式进行格式校验、DOM操作监听输入事件来即时校验、以及...
从阿里妈妈发现的几个不错的表单验证函数
10-30
本文将详细介绍从阿里妈妈项目中提取出的几个表单验证函数，包括它们的功能、实现原理以及使用方法。 #### 1. 检查当前浏览器是否为Netscape ```javascript function isNetscape() { app = navigator.appName....
javascript html5实现表单验证
10-22
首先，我们了解到表单验证是提高用户体验的一种有效手段，其主要目的是在用户提交数据之前，检测输入的数据是否有效，并为用户提供及时的反馈。使用HTML5和JavaScript可以相对简单地实现基本的表单验证功能。 文章...
JavaScript通过正则表达式实现表单验证电话号码
12-01
在JavaScript中，表单验证是确保用户输入的数据符合预期格式的关键步骤，这有助于提升用户体验并减少服务器端处理错误数据的压力。电话号码验证是常见的表单验证需求之一，它确保用户输入的是有效的电话号码格式。本...
JavaScript 学习-42.jQuery 提交表单 submit() 方法
qq_27371025的博客
06-09 8102
submit() 方法不带参数，就是触发 submit 事件，带function 参数，就是执行 submit 事件时运行的函数。通过 jquery 的submit() 方法，可以出发submit 事件form表单
jQuery之submit 事件及submit函数
码农的田园
02-18 5155
当提交表单时，会发生 submit 事件。 submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。 $(document).ready(function(){ $("form").submit(function(e){ alert("Submitted"); }); $("button").click(function(){
JS中对于form表单提交时验证form的onsubmit函数与submit类型按钮的onclick函数
xujing19920814的博客
04-09 1万+
onsubmit只能表单上使用,提交表单前会触发, onclick是按钮等控件使用, 用来触发点击事件。在提交表单前，一般都会进行数据验证，可以选择在submit按钮上的onclick中验证,也可以在onsubmit中验证。但是onclick比onsubmit更早的被触发。　　提交过程1、用户点击按钮 —->2、触发onclick事件 —-> 3、onclick返回true或未处理onclick
onsubmit和submit()详解
热门推荐
冰雪为融的博客
08-03 2万+
首先说明一点：onsubmit是Form对象的事件句柄，而submit()是form对象的事件方法 还有一个Submit 对象，代表 HTML 表单中的一个提交按钮 (submit button)。在 HTML 表单中 &lt;input type="submit"&gt; 标签每出现一次，一个 Submit 对象就会被创建。（这里我们暂且不详细说明哦） 一、onsubmit：在表单提交之前调用...
submit中return function()有效的原因
zhunode的探索
06-06 457
demo示例： <form onsubmit="return login()"> <input type="text"name="name" required="required" /> <input type="password" name="userpwd" autocomplete="off" required="required" /> <button type="submit">登录</button> &
$("form").submit()与$("form").submit(function(){ return true })的区别！
qq_38650613的博客
06-13 7557
$("form").submit()：一般用于网页中,最简单的提交。也就是说只会提交当前网页表单中存在的数据       而$("form").submit(function(){ return true })算是有JQuery脚本包装的表单提交。当返回ture时,则代表提交表单。当然,这只是其中之一的功能，今天才了解到还有另外一个功能。那就是提交缓存功能。      因为要使用kindedito...
Vue3 模板引用——ref
最新发布
qq_39055970的博客
10-24 681
Vue3模板引用(ref)使用指南：本文介绍了Vue3中模板引用的使用方法。1.访问DOM元素：通过ref属性获取元素引用，建议在onMounted生命周期中使用，避免未挂载时访问报错。2.组件引用：父组件可通过ref访问子组件暴露的方法和属性（需子组件使用defineExpose显式暴露）。3.父子通信：提供了props/emit和provide/inject两种方式实现组件间通信，前者适用于直接父子组件，后者适用于跨层级组件。文章通过代码示例展示了各种场景下的具体实现方式。
从零部署自维护版 Uptime Kuma：Node.js + PM2 + Nginx 全链路实战指南
qyhua的专栏
10-21 1132
本文详细介绍在Ubuntu 20.04上部署自维护版Uptime Kuma的全过程。针对非Docker环境需求，采用Node.js+PM2+Nginx方案，重点解决Node.js版本管理、服务守护和反向代理三大痛点。内容包括：创建专用运行用户、使用n管理器安装Node.js v18+、前后端分离部署、PM2进程管理以及Nginx配置SPA和WebSocket支持。通过规范化的/opt目录部署和严格的安全措施，打造稳定可靠的生产环境监控系统。
JavaScript 表单验证函数集合
在JavaScript开发中，表单验证是非常重要的一部分，它能确保用户输入的数据符合预期格式，从而提高应用的稳定性和用户体验。以下是对文中提到的几个验证函数的详细解释： 1. **数字验证** - `checkNum(str)`：这个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值