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()">