JS初学者实例教程(7):注册表单验证

2016-02-20 00:47 5 1 收藏

今天图老师小编给大家展示的是JS初学者实例教程(7):注册表单验证,精心挑选的内容希望大家多多支持、多多分享,喜欢就赶紧get哦!

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

上一篇学习了:JS初学者实例教程(6):Document对象读取表单元素

 实例七

本实例主要介绍了Document对象读取表单元素的使用,一个注册验证代码

html
  head
    title用户注册/title
  meta http-equiv="Content-Type" content="text/html; charset=gb2312"style type="text/css"
!--
body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
}
.STYLE1 {color: #FFFFFF}
--
  /style
  SCRIPT type="text/javascript"
    function Form_Submit()
 {
  if(regForm.userNumber.value=="")
  {
   alert("用户名不能为空!");
   return false;
  }
  else if(regForm.userpassWord.value=="")
  {
   alert("密码不能为空!");
   return false;
  }
  else if(regForm.userpassWord.value!=regForm.reuserpassWord.value)
  {
  alert("两次输入的密码不一致!");
   return false;
  }
  return true;
  //regForm.submit(); //不采用表单提交
 }
  /SCRIPT
  /head
 
  body
  FORM id="register" name="regForm" method="post" action=""
  table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#0099FF"
    tr
      td align="center" valign="middle" bgcolor="#FFFFFF"用户注册/td
    /tr
    tr
      td align="center" valign="middle" bgcolor="#FFFFFF"用户账号:
      input name="userNumber" type="text" id="usernumber" size="15"/td
    /tr
    tr
      td align="center" valign="middle" bgcolor="#FFFFFF"用户密码:
      input name="userPassWord" type="text" id="userpassWord" size="15"/td
    /tr
    tr
      td align="center" valign="middle" bgcolor="#FFFFFF"确认密码:
      input name="reuserPassWord" type="text" id="reuserpassWord" size="15"/td
    /tr
    tr
      td align="center" valign="middle" bgcolor="#FFFFFF"电子邮箱:
      input name="email" type="text" id="email" size="15"/td
    /tr
    tr
      td align="center" valign="middle" bgcolor="#FFFFFF"input type="button" name="Submit" value="提交" onClick="Form_Submit()"/td
    /tr
  /table
 /FORM
  /body
/html

效果演示:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

来源:https://www.tulaoshi.com/n/20160220/1632521.html

延伸阅读
标签: PS PS教程
本文由 中国 yntbw(一把火) 原创,转载请保留此信息! 本系列教程由中国互助课堂专为PS新手制作,更多教程和练习请 点击这里 ,在这里有系列的教程、练习,并有老师对练习进行点评与指导,欢迎朋友们的光临! 更多初学者实例教程: http://www.jcwcn.com/portal-topic-topicid-9.html 原图: 效果: [next] 步骤: 1、...
标签: PS PS教程
本着简单易记的原则,教大家做一种效果字,切记:跟做不是目的,掌握方法,动脑子学习,举一反三作出自己喜欢的式样。 先请看效果 [next] 新建文件,尺寸自定,够用即可,这里我定的是600*250像素的白底作为背景 设置前景色为红色,按alt+delete填充。 然后用文字蒙板工具,选择自己喜欢的字体并设置字体大小,在图中输入文字选区,按...
标签: PS PS教程
本文由 中国 webkxq2007   原创,转载请保留此信息! 本系列教程由中国互助课堂专为PS新手制作,更多教程和练习请 点击这里 ,在这里有系列的教程、练习,并有老师对练习进行点评与指导,欢迎朋友们的光临! 友情提示: 教程最后提供PSD源文件下载 本例引导大家制作一种效果极佳的烫金字效果,还是本着易学易记的原则,没...
标签: PS PS教程
最终效果:  新建一个200*200PX的文档,选择移动工具,勾选显示变换控件,做好参考线   再新建一层,在矩形选框工具 的属性栏上做如下图设置:      在左上角点一下,注意光标的十字心要对准哟.再填上颜色 再新建一层,在右下角点一下,填上另一种颜色   分别打开这两个层...
PS初学者实例教程 校正倾斜的照片 这次我们用裁剪工具来做校正照片,同样是简单易学易记的方法 大家可能会问:为何不一次把水平和垂直的偏斜都校正呢?可以试试看,你会发现,如果在一次裁剪中同时设置水平和垂直透视校正,最终的裁剪效果会使图象的宽高比例产生严重的比例失调。所以一次只进行一个方向的校正效果较好。 教程原...

经验教程

604

收藏

78
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部