javascript的Form验证

最新推荐文章于 2022-09-05 13:32:14 发布

dujingjing1230

最新推荐文章于 2022-09-05 13:32:14 发布

阅读量1k

点赞数

分类专栏： Javascript 文章标签： javascript email function input action validation

本文链接：https://blog.csdn.net/dujingjing1230/article/details/4169785

版权

Javascript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

javascript可以用来验证数据,比如可以在html的form向服务器发送内容之前验证发送的内容是否符合要求。

form中可以通过javascript验证的信息有:

1.是否用户没有填写必填项。

2.是否用户输入个合法的emai地址。

3.是否用户输入一个合法的日期。

4.是否用户在一个数字输入框错误的输入了文本。

下面是两个例子: 必填项的验证和email格式的验证。

a.必填项的验证:

首先看一下这段javascript的代码:

function validate_required(field,alerttxt) { with (field) { if (value==null||value=="") { alert(alerttxt);return false; } else { return true; } } }

可以看出来validate_required函数需要两个参数:field和alterttxt。通过判断field这个文本框是否空来确定是否返回提示信息alterttxt.

下面的html中使用了这个验证函数:

<html> <head> <mce:script type="text/javascript"></mce:script> </head> <body> <form action="submit.htm" οnsubmit="return validate_form(this)" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> </body> </html>

可以看到form的动作跳转到submit.htm的条件是onsubmit返回为true,也就是说validate_form这个函数需要返回true.然后再来看validate_form函数,它的参数是thisform也就是当前的form,这个函数会调用validate_required()函数来判断名字为email的这个文本输入框是否为空,如果为空就返回提示信息"Email must be filled out!"并且会给form的onsubmit返回个false值,这样action就不会发生,即不会跳转到submit.htm页面(PS:这个html页面自己可以创建一个,不过注意路径);如果名字为email的这个文本输入框不是空,那么页面就去跳转到submit.htm.

b.对于email格式的验证:

下面这个函数就是用来检测是否你输入的内容是否符合一般的email语法格式。先看这个这样函数:

function validate_email(field,alerttxt) { with (field) { apos=value.indexOf("@"); dotpos=value.lastIndexOf("."); if (apos<1||dotpos-apos<2) {alert(alerttxt);return false;} else {return true;} } }

这个函数还是有两个参数field和alerttxt,函数首先会去判断名字为field的文本输入框是否包含至少一个@符号和一个点(.)，而且@符号不能作为email地址的第一个字符串,至少有一个点(.)必须在@之后。

在html中使用这个验证函数:

<html> <head> <mce:script type="text/javascript"></mce:script> </head> <body> <form action="submit.htm" οnsubmit="return validate_form(this);" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> </body> </html>

希望这点东东能够给大家初学javascript的人一点帮助。我只是试着最详细最明了的去说明form validation的使用。如果对你有帮助一定要帮忙顶一下。留个言就当给俺个鼓励。我会继续写下去。。。