12-js校验form表单和event对象学习
Posted 胡辣汤王子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了12-js校验form表单和event对象学习相关的知识，希望对你有一定的参考价值。
js校验form表单：
<html> <head> <title><html> <head> <title>js校验form表单</title> <meta charset="UTF-8"/> <!--声明css代码域--> <style type="text/css"> /*设置背景图片*/ body{ background-image: url(img/b.jpg); } /*设置tr样式*/ tr{ height: 40px; } /*设置div样式*/ #showdiv{ border: solid 1px #FF0000; border-radius: 10px; width: 500px; margin: auto; margin-top: 40px; } /*设置table*/ table{ margin: auto; color: white; } span{ font-size:13px; } #codeSpan{ font-size:20px; } </style> <!--声明js代码域--> <script type="text/javascript"> //常见验证码 function createCode(){ //创建随机四位数字 var code=Math.floor(Math.random()*9000+1000); //获取元素对象 var span=document.getElementById("codeSpan"); //将数字存放到span中 span.innerHTML=code; } //验证用户名 function checkUname(){ //获取用户的用户名信息 var uname=document.getElementById("uname").value; //创建校验规则 var reg=/^[u4e00-u9fa5]{2,4}$/ //获取span对象 var span=document.getElementById("unameSpan"); //开始校验 if(uname=="" || uname==null){ //输出校验结果 span.innerHTML="用户名不能为空"; span.style.color="red"; return false; }else if(reg.test(uname)){ //输出校验结果 span.innerHTML="用户名ok"; span.style.color="green"; return true; }else{ //输出校验结果 span.innerHTML="用户名不符合规则"; span.style.color="red"; return false; } } //验证密码 function checkPwd(){ //获取用户的密码信息 var pwd=document.getElementById("pwd").value; //创建校验规则 var reg=/^[a-z]w{5,7}$/; //获取span对象 var span=document.getElementById("pwdSpan"); //开始校验 if(pwd=="" ||pwd==null){ //输出校验结果 span.innerHTML="*密码不能为空"; span.style.color="red"; return false; }else if(reg.test(pwd)){ //输出校验结果 span.innerHTML="*密码ok"; span.style.color="green"; return true; }else{ //输出校验结果 span.innerHTML="*密码格式不正确"; span.style.color="red"; return false; } checkPwd2(); } //校验确认密码 function checkPwd2(){ //获取第一次密码 var pwd=document.getElementById("pwd").value; //获取确认密码 var pwd2=document.getElementById("pwd2").value; //获取span对象 var span=document.getElementById("pwd2Span"); //比较两次密码是否相同 if(pwd2==""||pwd2==null){ span.innerHTML="确认密码不能为空"; span.style.color="red"; return false; }else if(pwd==pwd2){ span.innerHTML="确认密码ok"; span.style.color="green"; return true; }else{ span.innerHTML="两次密码不一致"; span.style.color="red"; return false; } } //校验手机号 function checkPhone(){ return checkField("phone",/^1[3,4,5,7,8]d{9}$/); } //校验邮箱 function checkMail(){ return checkField("mail",/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/ ) } //校验籍贯 function checkAddress(){ //获取用户选择的数据 var sel=document.getElementById("address").value; //获取span var span=document.getElementById("addressSpan"); //校验 if(sel!=0){ span.innerHTML="籍贯选择成功"; span.style.color="green"; return true; }else{ span.innerHTML="籍贯不能为请选择"; span.style.color="red"; return false; } } //校验爱好 function checkFav(){ //获取所有的爱好 var favs=document.getElementsByName("fav"); //获取span var span=document.getElementById("favSpan"); //遍历 for(var i=0;i<favs.length;i++){ if(favs[i].checked){ span.innerHTML="爱好选择成功"; span.style.color="green"; return true; } } span.innerHTML="爱好至少选则一项"; span.style.color="red"; return false; } //校验是否同意公司协议 function checkAgree(){ document.getElementById("sub").disabled=!document.getElementById("agree").checked; } //提交判断 function checkSub(){ checkUname(); checkPwd(); checkPwd2(); checkPhone(); checkMail(); checkAddress(); checkFav(); return checkUname()&&checkPwd()&&checkPwd2()&&checkPhone()&&checkMail()&&checkAddress()&&checkFav(); } /*-------------------------------------------------------------------------------------------------*/ //封装校验:相同的保留，不同的传参。 function checkField(id,reg){ //获取用户数据 var inp=document.getElementById(id); var va=inp.value; var alt=inp.alt; //创建校验规则 //获取span对象 var span=document.getElementById(id+"Span") //开始校验 if(va=="" ||va==null){ //输出校验结果 span.innerHTML=alt+"不能为空"; span.style.color="red"; return false; }else if(reg.test(va)){ //输出校验结果 span.innerHTML=alt+"ok"; span.style.color="green"; return true; }else{ //输出校验结果 span.innerHTML=alt+"不符合规则"; span.style.color="red"; return false; } } </script> </head> <body onload="createCode()"> <div id="showdiv"> <form action="#" method="get" onsubmit="return checkSub()"> <table> <tr> <td width="80px">用户名:</td> <td width="200px"> <input type="text" name="uname" id="uname" value="" onblur="checkUname()" alt="用户名"/> <span id="unameSpan">*2-4位汉字</span> </td> </tr> <tr> <td>密码:</td> <td> <input type="password" name="pwd" id="pwd" value="" onblur="checkPwd()"/> <span id="pwdSpan"></span> </td> </tr> <tr> <td>确认密码:</td> <td> <input type="password" name="pwd2" id="pwd2" value="" onblur="checkPwd2()"/> <span id="pwd2Span"></span> </td> </tr> <tr> <td>手机号:</td> <td> <input type="text" name="phone" id="phone" value="" alt="手机号" onblur="checkPhone()"/> <span id="phoneSpan"></span> </td> </tr> <tr> <td>邮箱：</td> <td> <input type="text" name="mail" id="mail" value="" alt="邮箱" onblur="checkMail()"/> <span id="mailSpan"></span> </tr> <tr> <td>性别</td> <td> 男 <input type="radio" name="sex" id="sex" value="0" checked="checked"/> 女 <input type="radio" name="sex" id="sex" value="1" /> </td> </tr> <tr> <td>籍贯:</td> <td> <select name="address" id="address" onchange="checkAddress()"> <option value="0">--请选择--</option> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option> </select> <span id="addressSpan"></span> </td> </tr> <tr> <td>爱好:</td> <td> <input type="checkbox" name="fav" id="" value="1" onclick="checkFav()"/>LOL <input type="checkbox" name="fav" id="" value="2" onclick="checkFav()"/>睡觉 <input type="checkbox" name="fav" id="" value="3" onclick="checkFav()"/>吃饭<br /> <input type="checkbox" name="fav" id="" value="4" onclick="checkFav()"/>打豆豆 <input type="checkbox" name="fav" id="" value="5" onclick="checkFav()"/>看电影 <input type="checkbox" name="fav" id="" value="6" onclick="checkFav()" />听歌 <span id="favSpan"></span> </td> </tr> <tr> <td>个人介绍:</td> <td> <textarea name="intro" rows="4" cols="40" id="intro"></textarea> </td> </tr> <tr> <td>验证码:</td> <td> <input type="text" name="code" id="code" value="" style="width: 100px;"/> <span id="codeSpan" onclick="createCode()" style="background-image: url(img/code.jpg.gif);color: black;"></span> </td> </tr> <tr> <td colspan="2" align="center"><input type="checkbox" name="" id="agree" value="" onclick="checkAgree()"/>是否同意本公司协议</td> </tr> <tr> <td colspan="2" align="center"><input type="submit" name="" id="sub" value="立即注册" disabled="disabled"/></td> </tr> </table> </form> </div> </body> </html>/title> <meta charset="UTF-8"/> <!--声明css代码域--> <style type="text/css"> /*设置背景图片*/ body{ background-image: url(img/b.jpg); } /*设置tr样式*/ tr{ height: 40px; } /*设置div样式*/ #showdiv{ border: solid 1px #FF0000; border-radius: 10px; width: 500px; margin: auto; margin-top: 40px; } /*设置table*/ table{ margin: auto; color: white; } span{ font-size:13px; } #codeSpan{ font-size:20px; } </style> <!--声明js代码域--> <script type="text/javascript"> //常见验证码 function createCode(){ //创建随机四位数字 var code=Math.floor(Math.random()*9000+1000); //获取元素对象 var span=document.getElementById("codeSpan"); //将数字存放到span中 span.innerHTML=code; } //验证用户名 function checkUname(){ //获取用户的用户名信息 var uname=document.getElementById("uname").value; //创建校验规则 var reg=/^[u4e00-u9fa5]{2,4}$/ //获取span对象 var span=document.getElementById("unameSpan"); //开始校验 if(uname=="" || uname==null){ //输出校验结果 span.innerHTML="用户名不能为空"; span.style.color="red"; return false; }else if(reg.test(uname)){ //输出校验结果 span.innerHTML="用户名ok"; span.style.color="green"; return true; }else{ //输出校验结果 span.innerHTML="用户名不符合规则"; span.style.color="red"; return false; } } //验证密码 function checkPwd(){ //获取用户的密码信息 var pwd=document.getElementById("pwd").value; //创建校验规则 var reg=/^[a-z]w{5,7}$/; //获取span对象 var span=document.getElementById("pwdSpan"); //开始校验 if(pwd=="" ||pwd==null){ //输出校验结果 span.innerHTML="*密码不能为空"; span.style.color="red"; return false; }else if(reg.test(pwd)){ //输出校验结果 span.innerHTML="*密码ok"; span.style.color="green"; return true; }else{ //输出校验结果 span.innerHTML="*密码格式不正确"; span.style.color="red"; return false; } checkPwd2(); } //校验确认密码 function checkPwd2(){ //获取第一次密码 var pwd=document.getElementById("pwd").value; //获取确认密码 var pwd2=document.getElementById("pwd2").value; //获取span对象 var span=document.getElementById("pwd2Span"); //比较两次密码是否相同 if(pwd2==""||pwd2==null){ span.innerHTML="确认密码不能为空"; span.style.color="red"; return false; }else if(pwd==pwd2){ span.innerHTML="确认密码ok"; span.style.color="green"; return true; }else{ span.innerHTML="两次密码不一致"; span.style.color="red"; return false; } } //校验手机号 function checkPhone(){ return checkField("phone",/^1[3,4,5,7,8]d{9}$/); } //校验邮箱 function checkMail(){ return checkField("mail",/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/ ) } //校验籍贯 function checkAddress(){ //获取用户选择的数据 var sel=document.getElementById("address").value; //获取span var span=document.getElementById("addressSpan"); //校验 if(sel!=0){ span.innerHTML="籍贯选择成功"; span.style.color="green"; return true; }else{ span.innerHTML="籍贯不能为请选择"; span.style.color="red"; return false; } } //校验爱好 function checkFav(){ //获取所有的爱好 var favs=document.getElementsByName("fav"); //获取span var span=document.getElementById("favSpan"); //遍历 for(var i=0;i<favs.length;i++){ if(favs[i].checked){ span.innerHTML="爱好选择成功"; span.style.color="green"; return true; } } span.innerHTML="爱好至少选则一项"; span.style.color="red"; return false; } //校验是否同意公司协议 function checkAgree(){ document.getElementById("sub").disabled=!document.getElementById("agree").checked; } //提交判断 function checkSub(){ checkUname(); checkPwd(); checkPwd2(); checkPhone(); checkMail(); checkAddress(); checkFav(); return checkUname()&&checkPwd()&&checkPwd2()&&checkPhone()&&checkMail()&&checkAddress()&&checkFav(); } /*-------------------------------------------------------------------------------------------------*/ //封装校验:相同的保留，不同的传参。 function checkField(id,reg){ //获取用户数据 var inp=document.getElementById(id); var va=inp.value; var alt=inp.alt; //创建校验规则 //获取span对象 var span=document.getElementById(id+"Span") //开始校验 if(va=="" ||va==null){ //输出校验结果 span.innerHTML=alt+"不能为空"; span.style.color="red"; return false; }else if(reg.test(va)){ //输出校验结果 span.innerHTML=alt+"ok"; span.style.color="green"; return true; }else{ //输出校验结果 span.innerHTML=alt+"不符合规则"; span.style.color="red"; return false; } } </script> </head> <body onload="createCode()"> <div id="showdiv"> <form action="#" method="get" onsubmit="return checkSub()"> <table> <tr> <td width="80px">用户名:</td> <td width="200px"> <input type="text" name="uname" id="uname" value="" onblur="checkUname()" alt="用户名"/> <span id="unameSpan">*2-4位汉字</span> </td> </tr> <tr> <td>密码:</td> <td> <input type="password" name="pwd" id="pwd" value="" onblur="checkPwd()"/> <span id="pwdSpan"></span> </td> </tr> <tr> <td>确认密码:</td> <td> <input type="password" name="pwd2" id="pwd2" value="" onblur="checkPwd2()"/> <span id="pwd2Span"></span> </td> </tr> <tr> <td>手机号:</td> <td> <input type="text" name="phone" id="phone" value="" alt="手机号" onblur="checkPhone()"/> <span id="phoneSpan"></span> </td> </tr> <tr> <td>邮箱：</td> <td> <input type="text" name="mail" id="mail" value="" alt="邮箱" onblur="checkMail()"/> <span id="mailSpan"></span> </tr> <tr> <td>性别</td> <td> 男 <input type="radio" name="sex" id="sex" value="0" checked="checked"/> 女 <input type="radio" name="sex" id="sex" value="1" /> </td> </tr> <tr> <td>籍贯:</td> <td> <select name="address" id="address" onchange="checkAddress()"> <option value="0">--请选择--</option> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option> </select> <span id="addressSpan"></span> </td> </tr> <tr> <td>爱好:</td> <td> <input type="checkbox" name="fav" id="" value="1" onclick="checkFav()"/>LOL <input type="checkbox" name="fav" id="" value="2" onclick="checkFav()"/>睡觉 <input type="checkbox" name="fav" id="" value="3" onclick="checkFav()"/>吃饭<br /> <input type="checkbox" name="fav" id="" value="4" onclick="checkFav()"/>打豆豆 <input type="checkbox" name="fav" id="" value="5" onclick="checkFav()"/>看电影 <input type="checkbox" name="fav" id="" value="6" onclick="checkFav()" />听歌 <span id="favSpan"></span> </td> </tr> <tr> <td>个人介绍:</td> <td> <textarea name="intro" rows="4" cols="40" id="intro"></textarea> </td> </tr> <tr> <td>验证码:</td> <td> <input type="text" name="code" id="code" value="" style="width: 100px;"/> <span id="codeSpan" onclick="createCode()" style="background-image: url(img/code.jpg.gif);color: black;"></span> </td> </tr> <tr> <td colspan="2" align="center"><input type="checkbox" name="" id="agree" value="" onclick="checkAgree()"/>是否同意本公司协议</td> </tr> <tr> <td colspan="2" align="center"><input type="submit" name="" id="sub" value="立即注册" disabled="disabled"/></td> </tr> </table> </form> </div> </body> </html>
event对象学习：
<html>
<head>
<title>event对象学习</title>
<meta charset="UTF-8"/>
<!--
event对象学习：
1、event对象获取鼠标坐标
2、event对象获取键盘值
-->
<style type="text/css">
#showdiv{
width: 300px;
height: 300px;
border: solid 1px;
}
</style>
<script type="text/javascript">
function getMouse(event){
//获取event对象
var eve=event || window.event;//因为浏览器差异问题，使用此种方式获取event对象
var x=eve.clientX;
var y=eve.clientY;
alert(x+":"+y);
}
function getKey(event){
//获取event对象
var eve=event || window.event;//因为浏览器差异问题，使用此种方式获取event对象
var code=eve.keyCode;
alert(code);
}
</script>
</head>
<body>
<h3>event对象学习</h3>
<hr />
<div id="showdiv" onmousemove="getMouse(event)">
</div>
<br /><br />
<input type="text" name="" id="" value="" onkeydown="getKey(event)"/>
</body>
</html>
<html><head><title>js校验form表单</title><meta charset="UTF-8"/><!--声明css代码域--><style type="text/css">/*设置背景图片*/body{background-image: url(img/b.jpg);}/*设置tr样式*/tr{height: 40px;}/*设置div样式*/#showdiv{border: solid 1px #FF0000;border-radius: 10px;width: 500px;margin: auto;margin-top: 40px;}/*设置table*/table{margin: auto;color: white;}span{font-size:13px;}#codeSpan{font-size:20px;}</style><!--声明js代码域--><script type="text/javascript">//常见验证码function createCode(){//创建随机四位数字var code=Math.floor(Math.random()*9000+1000);//获取元素对象var span=document.getElementById("codeSpan");//将数字存放到span中span.innerHTML=code;}//验证用户名function checkUname(){//获取用户的用户名信息var uname=document.getElementById("uname").value;//创建校验规则var reg=/^[u4e00-u9fa5]{2,4}$///获取span对象var span=document.getElementById("unameSpan");//开始校验if(uname=="" || uname==null){//输出校验结果span.innerHTML="用户名不能为空";span.style.color="red";return false;}else if(reg.test(uname)){//输出校验结果span.innerHTML="用户名ok";span.style.color="green";return true;}else{//输出校验结果span.innerHTML="用户名不符合规则";span.style.color="red";return false;}}//验证密码function checkPwd(){//获取用户的密码信息var pwd=document.getElementById("pwd").value;//创建校验规则var reg=/^[a-z]w{5,7}$/;//获取span对象var span=document.getElementById("pwdSpan");//开始校验if(pwd=="" ||pwd==null){//输出校验结果span.innerHTML="*密码不能为空";span.style.color="red";return false;}else if(reg.test(pwd)){//输出校验结果span.innerHTML="*密码ok";span.style.color="green";return true;}else{//输出校验结果span.innerHTML="*密码格式不正确";span.style.color="red";return false;}checkPwd2();}//校验确认密码function checkPwd2(){//获取第一次密码var pwd=document.getElementById("pwd").value;//获取确认密码var pwd2=document.getElementById("pwd2").value;//获取span对象var span=document.getElementById("pwd2Span");//比较两次密码是否相同if(pwd2==""||pwd2==null){span.innerHTML="确认密码不能为空";span.style.color="red";return false;}else if(pwd==pwd2){span.innerHTML="确认密码ok";span.style.color="green";return true;}else{span.innerHTML="两次密码不一致";span.style.color="red";return false;}}//校验手机号function checkPhone(){return checkField("phone",/^1[3,4,5,7,8]d{9}$/);}//校验邮箱function checkMail(){return checkField("mail",/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/ )}//校验籍贯function checkAddress(){//获取用户选择的数据var sel=document.getElementById("address").value;//获取spanvar span=document.getElementById("addressSpan");//校验if(sel!=0){span.innerHTML="籍贯选择成功";span.style.color="green";return true;}else{span.innerHTML="籍贯不能为请选择";span.style.color="red";return false;}}//校验爱好function checkFav(){//获取所有的爱好var favs=document.getElementsByName("fav");//获取spanvar span=document.getElementById("favSpan");//遍历for(var i=0;i<favs.length;i++){if(favs[i].checked){span.innerHTML="爱好选择成功";span.style.color="green";return true;}}span.innerHTML="爱好至少选则一项";span.style.color="red";return false;}//校验是否同意公司协议function checkAgree(){document.getElementById("sub").disabled=!document.getElementById("agree").checked;}//提交判断function checkSub(){checkUname();checkPwd();checkPwd2();checkPhone();checkMail();checkAddress();checkFav();return checkUname()&&checkPwd()&&checkPwd2()&&checkPhone()&&checkMail()&&checkAddress()&&checkFav();}/*-------------------------------------------------------------------------------------------------*///封装校验:相同的保留，不同的传参。function checkField(id,reg){//获取用户数据var inp=document.getElementById(id);var va=inp.value; var alt=inp.alt;//创建校验规则//获取span对象var span=document.getElementById(id+"Span")//开始校验if(va=="" ||va==null){//输出校验结果span.innerHTML=alt+"不能为空";span.style.color="red";return false;}else if(reg.test(va)){//输出校验结果span.innerHTML=alt+"ok";span.style.color="green";return true;}else{//输出校验结果span.innerHTML=alt+"不符合规则";span.style.color="red";return false;}}</script></head><body onload="createCode()"><div id="showdiv"><form action="#" method="get" onsubmit="return checkSub()"><table><tr><td width="80px">用户名:</td><td width="200px"><input type="text" name="uname" id="uname" value="" onblur="checkUname()" alt="用户名"/><span id="unameSpan">*2-4位汉字</span></td></tr><tr><td>密码:</td><td><input type="password" name="pwd" id="pwd" value="" onblur="checkPwd()"/><span id="pwdSpan"></span></td></tr><tr><td>确认密码:</td><td><input type="password" name="pwd2" id="pwd2" value="" onblur="checkPwd2()"/><span id="pwd2Span"></span></td></tr><tr><td>手机号:</td><td><input type="text" name="phone" id="phone" value="" alt="手机号" onblur="checkPhone()"/><span id="phoneSpan"></span></td></tr><tr><td>邮箱：</td><td><input type="text" name="mail" id="mail" value="" alt="邮箱" onblur="checkMail()"/><span id="mailSpan"></span></tr><tr><td>性别</td><td>男 <input type="radio" name="sex" id="sex" value="0" checked="checked"/>女 <input type="radio" name="sex" id="sex" value="1" /></td></tr><tr><td>籍贯:</td><td><select name="address" id="address" onchange="checkAddress()"><option value="0">--请选择--</option><option value="1">北京</option><option value="2">上海</option><option value="3">广州</option></select><span id="addressSpan"></span></td></tr><tr><td>爱好:</td><td><input type="checkbox" name="fav" id="" value="1" onclick="checkFav()"/>LOL<input type="checkbox" name="fav" id="" value="2" onclick="checkFav()"/>睡觉<input type="checkbox" name="fav" id="" value="3" onclick="checkFav()"/>吃饭<br /><input type="checkbox" name="fav" id="" value="4" onclick="checkFav()"/>打豆豆<input type="checkbox" name="fav" id="" value="5" onclick="checkFav()"/>看电影<input type="checkbox" name="fav" id="" value="6" onclick="checkFav()" />听歌<span id="favSpan"></span></td></tr><tr><td>个人介绍:</td><td><textarea name="intro" rows="4" cols="40" id="intro"></textarea></td></tr><tr><td>验证码:</td><td><input type="text" name="code" id="code" value="" style="width: 100px;"/> <span id="codeSpan" onclick="createCode()" style="background-image: url(img/code.jpg.gif);color: black;"></span></td></tr><tr><td colspan="2" align="center"><input type="checkbox" name="" id="agree" value="" onclick="checkAgree()"/>是否同意本公司协议</td></tr><tr><td colspan="2" align="center"><input type="submit" name="" id="sub" value="立即注册" disabled="disabled"/></td></tr></table></form></div></body></html>
以上是关于12-js校验form表单和event对象学习的主要内容，如果未能解决你的问题，请参考以下文章