本文是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