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前端学习资料,可以关注“武汉千锋”微信公众号领取!