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

  • jQuery屏蔽页面右键,禁止复制,文本选择代码

    屏蔽页面右键,禁止复制,文本选择功能,用jQuery实现非常简单。 125建站网分享两种方法。 方法一: //禁用右键、文本选择、复制 $(document).bind(“contextmenu”,function(){return false;}); $(document).bind(“selectstart”,function(){return fals…

    2019年10月16日
    3.5K0
  • HTML5画布(Canvas)速查表

    HTML5 <canvas> 标签用于绘制图像。<canvas> 元素本身仅仅是图形的容器,必须使用脚本来完成实际的绘图任务。HTML5 <canvas> 可用于在画布上绘制文本、线条、矩形、圆形等等。 HTML5画布(Canvas)元素 <canvas id=”myCanvas” width=”500″ heigh…

    2018年2月20日
    3.4K0
  • css布局基础-盒子模型

    网页设计的第一步就是设计版面布局,本文介绍了css布局基础-盒子模型,CSS盒模型是描述网页布局的视觉模型中网页元素的矩形盒状模型。盒模型由margin(边界)、border(边框)、padding(填充)和content(内容)4部分组成。

    2022年7月14日
    3.5K0
  • 如何在网页中输入多个连续的空格?

    默认状态下(输入法为半角状态),按空格键只能输入一个空格,要在文本之间插入多个连续的空格,可以使用以下几种方法: 1) 使用Ctrl+Shift+Space组合键。 2) 在中文全角状态下,使用空格键。 3) 选择【插入】→【HTML】→【特殊字符】命令下的“不换行空格”命令。 4) 直接在代码视图输入“&nbsp;”字符。

    2020年4月3日
    14.5K0
  • Div+CSS左侧尺寸固定右侧自适应布局的5种实现方法

    css多栏自适应布局一般使用position属性布局,或者用float属性布局,也可以使用display属性。 position适合首页布局,因为首页内容往往可以完全控制。float适合模板布局,模板中填充的内容无法控制。 相关阅读:左侧固定,右侧自适应布局的两种实现方法 1、浮动实现 原理:左侧定宽浮动,右侧使用margin-left,且不要定宽,容器尺寸…

    2021年11月29日
    3.5K0
  • 0基础学CSS

    本CSS教程能够让你在数小时内入门CSS,要求你有基本的HTML经验。

    2020年2月22日
    3.2K0

发表回复

登录后才能评论