纯射流研究…实现表单验证实例

表单我实现了，输入属性是文本（文本框)、无线电（单选按钮)、复选框（多选按钮)的知识点，

字段集标签（组合表单中的相关元素)、选择标签（选择列表)和文本区域标签（多行文本框)。

表单操作=' mailto :[电子邮件保护]'方法=' post ' enctype=' text/plain ' on submit=' return checkForm()' H2学生选课基本信息/h2姓名：输入类型='text' id='name '占位符='您的姓名' size=' 20 ' on focus=' checkname focus()' on bulr=' checkname blur()' div id=' name prompt '/div br/学号：输入类型='text' id='num '占位符=' your num ' size=' 20 ' on focus=' checkNumFocus()' on bulr=' checknumbulr()' div id=' num compt '/div br/性别：labelinput type=' radio 名称=' sex '值='男检查男/label labelinput type=' radio ' name=' sex ' value='女'女br/标签邮箱：输入类型='text' id='email '占位符='您的邮件' size=' 20 ' on focus=' checkeemailfocus()' on bulr=' checkeemailblur()' div id=' EmailPrompt '/div br/field set class=' class ' id=' course ' on change=' checke course()'图例可选课程/图例标签输入名称='Class '类型='复选框'值='' /算法设计/label br/标签输入名称=' Class ' type=' checkbox ' 值=' '/人工智能/label br/标签输入名称=' Class ' type=' checkbox ' value=' '/编译原理/label br/标签输入名称=' Class ' type=' checkbox ' value=' '/机器学习/labelbr/标签输入名称='类'类型='复选框'值='' /计算机网络/label /fieldset喜欢的老师：选择名称="教师"选项值="0"刘老师/option选项值='0 '齐老师/option选项值='0 '李老师/option选项值='0 '马老师/option选项值='0 '肖老师/option /selectbr/还有话说：br/文本区域id='消息'名称='消息'占位符='您给我们的消息cols=' 50 '行=' 10 '/文本区域br/br/按钮类型=' submit '提交/button button type='reset '重置/button /form css样式如下图：

钢性铸铁这部分写的不太好，请大家批评指正。(参考的网上的一些资料，网址忘了)

* { margin-left : auto；右边距：汽车；最大宽度： 500像素；背景： # F8F 8；Helvetica阿里亚尔，邮编： 10pxfont: 12px，无衬线字体；color : # 666 border-radius : 5px；-web套件-边框-半径： 5px-moz-border-radius : 5px；}车身，形式{ padd : 15px/*宽度： 500像素；*/背景： # F4F 4；} H2 {填充-底部：2 px* padding:0font: 24px '投石机Helvetica阿里亚尔，无衬线；padd : 20px 0px 20px 40pxdisplay :块；边距：-30px-30px 10px-30px；颜色： # FFF；背景# 9dc 45 ftext-shadow : 1px 1px 1px # 949494；边框半径： 5px 5px 0px 0px-web套件-边框-半径： 5px 5px 0px 0px-moz-border-radius : 5px 5px 0px 0px；边框-底部：1px实心# 89AF4C}/*标签{ display : block margin : 0px 0px } */选择{ color: # 555height: 30px线高：12 px宽度： 30%;padd : 0px 0px 0px 10px margin-top : 2px；border: 1px实心# E5E 5；背景# FBFBFBoutline : 0；-web kit-box-shadow : insert 1px 1px 2px rgba(238，238，238，0.2)；盒影：插入1px 1px 2px rgba(238，238，238，0.2)；font:普通12px/12px Arial，Helvetica，无衬线；} .类输入{垂直对齐：中间；页边距-顶部：-2px；边距-底部：1 px高度： 35px}文本区域{高度：100px宽度： 90%;衬垫-top : 10px；}按钮{底色： # 9DC45F边界半径： 5px-web套件-边框-半径： 5px-moz-border-border-radius : 5px；border : none padd : 10px 25px 10px 25pxcolor : # FFF；文字-阴影： 1px 1px 1px # 949494}按钮：悬停{背景色： # 80A24A} #姓名、#号码、#电子邮件{竖排-中间对齐：}/*输入和图片在一行*/#namePrompt，# numPrompt，# EmailPrompt {竖排-中间对齐：/*输入和图片在一行*/display:内联块；padding: 0px颜色：红色；背景-颜色： # F4F 4；} /*验证表单的格式*//*当鼠标放到文本框时，提示文本的样式*/.import _ prompt { border : solid 1px # ffcd 00；背景-color : # ffffda；} 下来就是射流研究…表单验证了。这是射流研究…验证的目标。1.当鼠标放在姓名文本框时，提示文本及样式。2./*当鼠标离开姓名文本框时，提示文本及样式*/汉字3.当鼠标放在学号文本框时，提示文本及样式。4./*当鼠标离开学号文本框时，提示文本及样式*/只能是数字5.邮箱的验证，必须符合邮箱的格式。6.表单提交时验证表单内容输入的有效性。其中用到了正则表达式来匹配。匹配简体中文的正则是^[\u4e00-\u9fa5] $匹配邮箱格式的正则是[\w！#$%'* /=?^_`{|}~-] (?\.[\w！#$%'* /=?^_`{|}~-] )*@(?[\w](？[\w-]*[\w])？\.)[\w](？[\w-]*[\w])？直接上代码：[javascript]查看纯文本在密码上查看代码片派生到我的代码片//通过getElementById得到相应元素函数$(id){返回文档。getelementbyid(id)；} //当鼠标放在姓名文本框时，提示文本及样式。

函数checkname focus(){ var userNameId=$(' name ')；usernameid。类名=' import _ promptvar NamePrompt=$(“名称提示”)；namePrompt.innerHTML='必须是汉字哦~';} /*当鼠标离开姓名文本框时，提示文本及样式*/function CheckNameBlur(){ var NamePrompt=$(' NamePrompt ')；name prompt . innerhtml=nullvar reg1=/^[\u4e00-\u9fa5]$/；//匹配简体中文的正则表达式var name=$(“name”).价值；//先查看是否为空if(name==' '){ NamePrompt。InnerHTML='名字不能为空!'返回false} else if(！条例1。测试(名称)){ var true img=document。创建元素(' img ')；trueimg.src='http:/表单图像/false。png '；trueimg.width=' 15name提示符。appendchild(真img)；返回false} else { var true img=document。创建元素(' img ')；trueimg.src='http:/表单图像/true。png '；trueimg.width=' 15name提示符。appendchild(真img)；返回真；} } //当鼠标放在学号文本框时，提示文本及样式function checkNumFocus(){ var studentNum=$(' num ')；studentnum。类名=' import _ promptvar nummppt=$(' Numpmpmpt ')；' numPrompt.innerHTML='必须是0-9的10位数字哦~';} /*当鼠标离开学号文本框时，提示文本及样式*/function CheckNumblur(){ var num ompt=$(' num ompt ')；reg2=/^\d{10}$/；定义变量学号=$('num ').价值；//先验证是否为空如果(学号==' '){ NumPro。InnerHTML='学号不能为空！返回false} else if(！reg2.test($('num ').value)){//好奇怪，使用变量就变成空的了，在外边就有值var true img=文档。创建元素(' img ')；trueimg.src='http:/表单图像/false。png '；trueimg.width=' 15numcompt。appendchild(真img)；返回false} else { var true img=document。创建元素(' img ')；trueimg.src='http:/表单图像/true。png '；trueimg.width=' 15numcompt。appendchild(真img)；返回真；} } //邮箱的验证，必须符合邮箱的格式function CheckEmailFocus(){ var email=$(' email ')；电子邮件。类名=' import _ promptvar EmailPrompt=$(' EmailPrompt ')；emailPrompt.innerHTML='请输入您常用的电子邮箱；}函数CheckEmailBlur(){ var EmailPro=$(' EmailPrompt ')；email prompt . innerhtml=nullvar email value=$(' email ').价值；var reg3=/[\w！#$%'* /=?^_`{|}~-] (?\.[\w！#$%'* /=?^_`{|}~-] )*@(?[\w](？[\w-]*[\w])？\.)[\w](？[\w-]*[\w])？/;//先验证是否为空if(EmailVaLue==' '){ EmailPrompt。InnerHTML='邮箱不能为空!'；返回false} else if(！条例3。test(EmailVaLue)){ var true img=document。创建元素(' img ')；trueimg.src='http:/表单图像/false。png '；trueimg.width=' 15emailprompt。appendchild(真img)；返回false} else { var true img=document。创建元素(' img ')；trueimg.src='http:/表单图像/true。png '；trueimg.width=' 15emailprompt。appendchild(真img)；返回真；} } //验证复选框函数检查课程(){ var课程=$(' course ')；var CBS=课程。getelementsbytagname(' input ')；var b=假；for(var I=0；icbs.lengthi ){ if(cbs[i]).type=='checkbox' cbs[i].选中){ b=真；} } if(！b){ alert('请至少选择一门课程！');返回false} } //表单提交时验证表单内容输入的有效性函数check FORm(){ var Flagname=checknamerbrur()；var FlagNum=CheckNumblur()；var标志email=CheckEmailblur()；var标志航向=检查航向()；if(flag name==true flag num==true flag email==true flag course==true){ return true；} else {返回false} }以上所述是小编给大家介绍的纯射流研究…实现表单验证实例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！