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%的人还看了以下文章

  • 哪些浏览器支持HTML5?

    目前支持HTML5的浏览器主要有: 谷歌浏览器(全面支持HTML5)、360浏览器、搜狗浏览器、世界之窗、Firefox、Safari、Opera、QQ浏览器、傲游浏览器、IE10。 如要下载支持HTML5的浏览器,请到官网下载!

    2019年3月13日
    4.5K0
  • 第2课:HTML是什么?

    HTML是什么? HTML是一门语言,它令我们可以在因特网上展示信息。你所看到的网页,是浏览器对HTML进行解释的结果。要查看一个网页的HTML代码,只需在浏览器菜单栏上点击“查看”,然后选择“源文件”即可。 对于生手来说,HTML代码看似很复杂,不过本教程将帮助你弄清楚它们的含义。 HTML能用来做什么? 如果你要制作网站的话,学习HTML是不可避免的。即…

    2018年1月20日
    3.1K0
  • 巧用边框线实现立体按钮效果(纯CSS)

    本文教你使用CSS制作立体按钮,代码简单。

    2020年2月2日
    4.2K0
  • vue学习-我的第一个vue代码

    创建一个 .html 文件,然后通过如下方式引入 Vue: <!– 开发环境版本,包含了有帮助的命令行警告 –> <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script> 或者: <!– 生产环境版本,优化了尺寸和速度 –>…

    2020年6月14日
    2.3K0
  • HTML5- Canvas入门(二)画线并设置颜色

    HTML5- Canvas入门(一)画线 上一节课我们学会了 Canvas画线,绘制了一条黑色的直线,但如果我们想要绘制一条红色的或者其它颜色的线段,该怎么做呢? 答案很简单,使用ctx.strokeStyle来设定描边的颜色即可。我们画三条红色的线段吧: <canvas id=”myCanvas” width=”200″ height=”200″ s…

    2022年7月10日 网页制作
    3.1K0
  • CSS制作三行二列居中布局,高度自适应

    本实例要制作三行二列网页布局,这是网页制作中最常见的布局方式,如何使整个页面内容居中,如何使高度适应内容自动伸缩,是本实例中的难点。 header right             left             footer 代码解释…

    2018年7月29日
    2.9K0

发表回复

登录后才能评论