本文是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
微信扫一扫 
支付宝扫一扫 
