js验证表单验证,包括用户名、密码、确认密码等,用户注册页面实例

js验证表单验证,包括用户名、密码、确认密码等,用户注册页面实例

 

本文是js验证表单输入的入门级教程,要求你会基础的HTML,JS知识。

页面HTML 表单代码:

<form action="" method="post" enctype="multipart/form-data" name="reg_form">
<div class="info_input">
    <div class="ptag">用户名:</div>
    <div class="ftag"><input name="userName" type="text" class="inputstyle" maxlength="80"/></div>
</div>
<div class="info_input">
    <div class="ptag">密码:</div>
    <div class="ftag"><input name="userPw" type="password" class="inputstyle" maxlength="64"/></div>
</div>
<div class="info_input">
    <div class="ptag">确认密码:</div>
    <div class="ftag"><input name="confirmPw" type="password" class="inputstyle" maxlength="64"/></div>
</div>
<div class="info_input">
    <div class="ptag">性别:</div>
    <div class="ftag">
    <input type="radio" name="gender" id="radio" value="male" />男
    <input type="radio" name="gender" id="radio" value="female" />女
    <input name="gender" type="radio" id="radio" value="secrecy" checked="checked" />保密
</div>
</div>
<div class="info_input">
    <div class="ptag">所在专业:</div>
    <div class="ftag">
    <select name="select" id="select">
        <option value="001">软件工程</option>
        <option value="002" selected="selected">人工智能</option>
        <option value="003">网络工程</option>
        <option value="004">物联网</option>
        <option value="005">大数据</option>
    </select>
</div>
</div>
<div class="info_input">
    <div class="ptag">爱好:</div>
<div class="ftag">
  <input name="checkbox" type="checkbox" id="checkbox" checked="checked" />读书
  <input type="checkbox" name="checkbox" id="checkbox" />旅游
  <input type="checkbox" name="checkbox" id="checkbox" />运动
  <input type="checkbox" name="checkbox" id="checkbox" />音乐
</div>
</div>
<div class="info_textarea">
  <div class="pmultitag" >个人简介:</div>
  <div class="fmultitag"><textarea name="rule" cols="50" rows="6" class="textareastyle" id="textarea"></textarea></div>
</div>
<div class="info_input">
  <div class="ptag">头像:</div>
  <div class="ftag">
  <input name="fileField" type="file" id="fileField" size="60" />
  </div>
</div>
<div class="info_btn">
  <input name="submitbtn" type="submit" class="btnstyle" id="button" value="立即注册" onClick="return checkform()" />
  <input name="resetbtn" type="reset" class="btnstyle" id="button" value="取消注册" />
</div>
</form>

表单验证的JS代码:

function checkform()
{
var userName,userPw,confirmPw;//用于保存页面上的用户名、密码及确认密码
userName=reg_form.userName.value;//取得页面上输入的用户名
userPw=reg_form.userPw.value; //取得页面上输入的密码
confirmPw=reg_form.confirmPw.value;//取得页面上输入的确认密码
if(userName==""||userPw=="") //判断用户名或密码是否为空
{
alert("用户名或密码不能为空");
return false;
}
else if(userPw!=confirmPw) //判断密码和再次输入密码是否不一致
{
alert("两次输入的密码不一直");
reg_form.userPw.focus(); //将插入点移至密码框
return false;
}
else
{ //如果一切正常,页面跳转
reg_form.action="success.html"; //页面跳转到success.html
return true;
}
}

知识点:用户输入有误,应给出错误提示,不提交表单。

上例中代码是如果有误,return false;   成功才return true;

然后将事件onClick=”return checkform()”绑定到提交按钮上。

也可以在<form>标签中通过onsubmit=”return checkform()”来实现

<form id="reg_form" name="reg_form" method="post" onsubmit="return checkform()">

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3655.html

(2)
江山如画的头像江山如画管理团队
上一篇 2019年9月5日 上午9:25
下一篇 2019年9月10日 下午12:21

99%的人还看了以下文章

  • 第14课:上传网页

    只要你有服务器空间和一个FTP工具就可以在因特网上发布自己的网站了。

    2018年1月18日
    4.8K1
  • 网页设计常见css3动画效果(摆动、缩放、旋转、透明、反弹)

    网页上常看到某个DIV或图片有渐入、摆动、缩放、旋转、透明、反弹等效果,今天分享给大家! <!DOCTYPE html> <html> <head> <meta name=”viewport” content=”initial-scale=1.0, maximum-scale=1.0, user-scalable=n…

    2022年5月9日
    2.9K0
  • 第3课:颜色与背景

    本课,你将学习如何在网站上应用颜色与背景。我们还会介绍用于定位和控制背景图像的高级方法。

    2020年2月22日
    3.5K0
  • Zoho Docs-在网页中嵌入PPT的最佳方案(个人版5G免费)

    Zoho WorkDrive – 全面的在线共享文档工具 在125建站网上想嵌入PPT,分享给大家 ,并且可以播放。 我思考了三种方法: 是在Zoho Docs上操作; 是PPT以图片的形式保存(动画效果没有了),直接轮播; 是自己手写动画+轮播,达到PPT播放效果(用express.js来实现)比较复杂,并且对小白站长不适用。 很自信的要自己手…

    2023年1月16日 网页制作
    1.1K0
  • 最简单的wmv视频网页播放代码

    如何在网页上播放wmv格式视频? 1、将以下代码复制到html网页的<body>中:如 <embed src=”wangyesheji1.wmv” width=”460″ height=”414″ autostart=”1″ filename=”mms:/wangyesheji1.wmv” showcontrols=”1″ showstat…

    2021年4月5日
    5.8K0
  • 第13课:浮动元素(float)

    我们可以通过CSS属性float令元素向左或向右浮动。也就是说,令盒子及其中的内容浮动到文档(或者是上层盒子)的右边或者左边(参见第9课关于盒状模型的描述)。下图阐明了其原理: 举个例子,假如我们想让一张图片被一段文字围绕着,那么其显示效果将如下所示: 如何实现这个效果? 上例的HTML代码如下所示: <div id=”picture”><…

    2020年2月25日
    2.4K0

发表回复

登录后才能评论