JavaScript表单验证完美代码

用原生射流研究…写一个简单的表单验证

首先，是超文本标记语言部分

div class='divAll' div id='titles '新用户注册/div div id="目录“h3基本信息/H3人力资源宽度=' 95% '颜色=' # f2f 2 '/形式动作=' # 提交时=' return CheckFORm()' div id=' FORm-item group '标签为='用户名'用户名：/标签输入类型=' text ' id=' userName ' class=' userName ' on color=' check userName()' on input=' check userName()' span class=' default ' id=' namerer '请输入至少3位的用户名/span /div div id='form-itemGroup '标签为='userPasword '密码：/标签输入类型=' password ' id=' userPasword ' class=' userName ' on color=' checkPassword()' on input=' checkPassword()' span class=' 默认' id=' passwordrer '请输入四到8位的密码/span /div div id='form-itemGroup '标签为='userConfirmPasword '确认密码：/标签输入类型=' password ' id=' user confirm pasword ' class=' userName ' on color=' confirm password()' on input=' confirm password()' span class=' default ' id=' conPasswordErr '请再输入一遍密码/span /div div id='form-itemGroup '标签为='用户电话'手机号码：/标签输入类型=' text ' id=' userName ' class=' userName ' onblor=' CheckPhone()' on input=' CheckPhone()' span class=' default ' id=' phone err '请输入11位手机号码/span /div按钮类型='submit' class='divBtn '注册/button /div /form /div /div接着，为其加上半铸钢钢性铸铁(铸造半钢)样式

样式类型='text/css ' .divAll { width:800px字体系列： '黑体；余量：50px汽车；} # titles { font-weight : bold；font-size :18 px高度：50 px线高：50 px背景# FFF9F3文本对齐：居中；border:1px固体# CCC} # contents { margin-top :20 px；背景# FFF9F3border:1px固体# CCC} # form-ItemGrouP { padd :10 px；} #表单-项目组标签{ display : inline-block；宽度宽度：100像素宽度：32像素线高：32 pxcolor : # 666 text-右对齐：} #表单项目组.用户名{宽度：200像素高度：40 px线高：40 pxborder:1px固体# CCC } #表单-项目组.默认{ width :200 px h8 :32 px线高：32 pxcolor: # 999} #form-itemGroup .错误{ height:32px线高：32 pxcolor: # F00} #form-itemGroup .成功{ height:32px线高：32 pxcolor: # 096}。BTN分区{页边距-顶部：20像素；左边距左侧：200像素宽度宽度：100像素宽度：32像素线高：32 px背景-颜色： # F93边距-底部：10 pxcolor : # fffffont-weight : bold；border:none}/样式最后是射流研究…部分

脚本类型='text/javascript '函数检查表单(){ var name tip=check username()；var passtip=check password()；var conpasstip=确认密码()；var phone tip=CheckPhone()；返回姓名提示通电话提示通电话提示；} //验证用户名function check userName(){ var userName=document。getelementbyid(' userName ')；var errname=document。getelementbyid(' NameErr ')；定义变量模式=/^\w{3,}$/；//用户名格式正则表达式：用户名要至少三位if(用户名。价值。长度==0){ errname。innerhtml='用户名不能为空errname.className='错误'返回false} if(！模式。测试(用户名。value)){ errname。innerhtml='用户名不合规范errname.className='错误'返回false} else { errname。innerhtml=' OK '错误名称。类名='成功'；返回真；} } //验证密码function CheckPassPort(){ var user passwd=document。getelementbyid(' userPasword ')；var errPasswd=文档。getelementbyid(' passwordErr ')；定义变量模式=/^\w{4,8}$/；//密码要在4-8位if(！模式。测试(用户密码。value)){ errpasswd。innerhtml='密码不合规范errPasswd.className='错误'返回false} else { errpasswd。innerhtml=' OK ' errpasswd。类名='成功'；返回真；} } //确认密码函数confirm password(){ var user passwd=document。getelementbyid(' userPasword ')；var userConPassword=文档。getelementbyid(' usercompassword ')；var errConPasswd=document。getelementbyid(' conPasswordErr ')；if((userpasswd.value)！=(userconpassword。value)| | userconpassword。价值。长度==0){ errconpasswd。innerhtml='上下密码不一致errConPasswd.className='错误'返回false} else { errconpasswd。innerhtml=' OK ' errconpasswd。类名='成功'；返回真；} } //验证手机号function CheckPhone(){ var user phone=document。getelementbyid('用户电话')；var phonrer=文档。getelementbyid(' PhoneErr ')；定义变量模式=/^1[34578]\d{9}$/；//验证手机号正则表达式if(！模式。测试(用户电话。value)){ PhoneRR。innerHTMl='手机号码不合规范phonrErr.className='错误'返回false } else { phorerr。innerhtml=' OK ' phorerr。类名='成功'；返回真；} }/脚本好了，打开浏览器测试一下吧

填写数据，可以！

以上所述是小编给大家介绍的Java脚本语言表单验证完美代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！