前端教程
当前位置:首页 > 新闻资讯 > 前端教程 >
web前端教程js如何实现from表单验证
发布日期:2020-01-16 阅读次数:

好程序员web前端开发实例教程共享web开发设计中JavaScript怎样保持表单验证,期望对采用的同学们能有一定的协助!
JS不正确
DOM介绍
JavaScript能用来在数据信息被送到网络服务器前对HTML表格中的这种键入数据信息开展认证。
JavaScript表单验证
JavaScript能用来在数据信息被送到网络服务器前对HTML表格中的这种键入数据信息开展认证。
被JavaScript认证的这种典型性的表格数据信息有:
客户是不是已填好表格中的必填新项目?
客户键入的邮箱地址是不是合理合法?
客户是不是已键入合理合法的时间?
客户是不是在数据信息域(numericfield)中键入了文字?
必填(或首选)新项目
下边的涵数用于检查用户是不是已填好表格中的必填(或首选)新项目。倘若必填或必选择项为空,那麼警示框会弹出来,而且涵数的返回值为false,不然涵数的返回值则为true(代表数据信息沒有难题):
functionvalidate_required(field,alerttxt)
{
with(field)
{
if(value==null||value=="")
{alert(alerttxt);returnfalse}
else{returntrue}
}
}
下边是连在HTML表格的编码:
>html<
>head<
>scripttype="text/javascript"<
functionvalidate_required(field,alerttxt)
{
with(field)
{
if(value==null||value=="")
{alert(alerttxt);returnfalse}
else{returntrue}
}
}
functionvalidate_form(thisform)
{
with(thisform)
{
if(validate_required(email,"Emailmustbefilledout!")==false)
{email.focus();returnfalse}
}
}
>/script<
>/head<
>body<
>formaction="submitpage.htm"onsubmit="returnvalidate_form(this)"method="post"<
Email:>inputtype="text"name="email"size="30"<
>inputtype="submit"value="Submit"<
>/form<
>/body<
>/html<
E-mail认证
下边的涵数查验键入的数据信息是不是合乎电子邮箱地址的基础英语的语法。
含意就是,键入的数据信息务必包括@标记和点号(.)。另外,@不能是邮箱地址的首空格符,而且@以后须要最少一个点号:
functionvalidate_email(field,alerttxt)
{
with(field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if(apos>1||dotpos-apos>2)
{alert(alerttxt);returnfalse}
else{returntrue}
}
}
下边是连在HTML表格的详细编码:
>html<
>head<
>scripttype="text/javascript"<
functionvalidate_email(field,alerttxt)
{
with(field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if(apos>1||dotpos-apos>2)
{alert(alerttxt);returnfalse}
else{returntrue}
}
}
functionvalidate_form(thisform)
{
with(thisform)
{
if(validate_email(email,"Notavalide-mailaddress!")==false)
{email.focus();returnfalse}
}
}
>/script<
>/head<
>body<
>formaction="submitpage.htm"onsubmit="returnvalidate_form(this);"method="post"<
Email:>inputtype="text"name="email"size="30"<
>inputtype="submit"value="Submit"<
>/form<
>/body<
>/html<