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>
浙公网安备 33010602011771号