JavaScript 表单验证如何实现的?

JavaScript 表单验证如何实现的?

为了保证提交数据的正确性,用户在填写表单的过程中还需要编写一堆的验证操作,可以利用JavaScript来验证完成。下面就给大家分享在web开发中JavaScript表单验证如何实现的?希望对用到的同学能有所帮助!

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>

JavaScript还有更多重要的功能和作用,更多web前端学习资料,可以关注“武汉千锋”微信公众号领取!

本站所有文章资讯、展示的图片素材等内容均为注册用户上传(部分报媒/平媒内容转载自网络合作媒体),仅供学习参考。 用户通过本站上传、发布的任何内容的知识产权归属用户或原始著作权人所有。如有侵犯您的版权,请联系我们反馈本站将在三个工作日内改正。