JavaScript之Form表单及表单校验
一、Form表单基础操作
1、js操作多选框、单选框
被选中状态下在js中checked属性值为true,未选中状态为false
//多选操作
function testCheckBox(){
//获取所有的多选元素对象数组
var favs = document.getElementsByName("fav");
//遍历数组
for(var i=0;i<favs.length;i++){
if(favs[i].checked){
alert(favs[i].value+":"+favs[i].checked);
}
}
}
//全选
function testCheckBox2(){
var favs = document.getElementsByName("fav");
for(var i=0;i<favs.length;i++){
favs[i].checked=true;
}
}
//反选
function testCheckBox3(){
var favs = document.getElementsByName("fav");
for(var i=0;i<favs.length;i++){
favs[i].checked=!favs[i].checked;
}
}
2、js操作下拉框
被选择的option对象在js中selected属性值为true,未选中状态为false
//操作下拉框
function testSel(){
//获取下拉框对象
var sel = document.getElementById("address");
alert(sel.value);
//获取option对象集合
var os = sel.options;
for(var i=0;i<os.length;i++){
alert(os[i].value+":"+os[i].text);
}
}
3、实例
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie-edge">
<title>JavaScript之操作表单元素</title>
<script>
//多选操作
function testCheckBox(){
//获取所有的多选元素对象数组
var favs = document.getElementsByName("fav");
//遍历数组
for(var i=0;i<favs.length;i++){
if(favs[i].checked){
alert(favs[i].value+":"+favs[i].checked);
}
}
}
//全选
function testCheckBox2(){
var favs = document.getElementsByName("fav");
for(var i=0;i<favs.length;i++){
favs[i].checked=true;
}
}
//反选
function testCheckBox3(){
var favs = document.getElementsByName("fav");
for(var i=0;i<favs.length;i++){
favs[i].checked=!favs[i].checked;
}
}
//操作下拉框
function testSel(){
//获取下拉框对象
var sel = document.getElementById("address");
alert(sel.value);
//获取option对象集合
var os = sel.options;
for(var i=0;i<os.length;i++){
alert(os[i].value+":"+os[i].text);
}
}
</script>
</head>
<body>
<h3>操作表单元素</h3>
<hr/>
<b>操作多选框</b><br/><br/>
<input type="checkbox" name="fav" id="fav" value="1"/>青花瓷<br/>
<input type="checkbox" name="fav" id="fav" value="2"/>木马城市<br/>
<input type="checkbox" name="fav" id="fav" value="3"/>消愁<br/>
<input type="checkbox" name="fav" id="fav" value="4"/>素颜<br/>
<input type="checkbox" name="fav" id="fav" value="5"/>成都<br/>
<input type="checkbox" name="fav" id="fav" value="6"/>彼岸花开<br/>
<input type="button" name="" id="" value="播放" onclick="testCheckBox()"/>
<input type="button" name="" id="" value="全选" onclick="testCheckBox2()"/>
<input type="button" name="" id="" value="反选" onclick="testCheckBox3()"/>
<hr/>
<select name="" id="address" onchange="testSel()">
<option value="0">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
</body>
</html>
二、Form表单校验完整代码
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie-edge">
<title>JavaScript之表单校验</title>
<style>
tr{
height:40px;
}
#showdiv{
border:solid 1px #201f1f;
border-radius:10px;
width:500px;
margin:auto;
margin-top:40px;
}
table{
margin: auto;
}
span{
font-size: 13px;
}
#codeSpan{
font-size: 20px;
}
</style>
<script>
//常见验证码
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}$/
//获取校验对象
var span = document.getElementById("unameSpan");
//开始校验
if(uname=="" || uname==null){
//输出校验结果
span.innerHTML="用户名不能为空";
span.style.color="red";
return false;
}else if(reg.test(uname)){
//输出校验结果
span.innerHTML="用户名符合规则";
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}$/;
//获取校验对象
var span = document.getElementById("pwdSpan");
//开始校验
if(pwd==""||pwd==null){
//输出校验结果
span.innerHTML="密码不能为空";
span.style.color="red";
return false;
}else if(reg.test(pwd)){
span.innerHTML="密码符合规则";
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="确认密码";
span.style.color="green";
return true;
}else{
span.innerHTML="两次密码不一致";
span.style.color="red";
return false;
}
}
//校验手机号
function checkPhone(){
return checkFiled("phone",/^1[3,4,5,7,8]\d{9}$/);
}
//校验邮箱
function checkMail(){
return checkFiled("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 checkFiled(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+"符合规则";
span.style.color="green";
return true;
}else{
//输出校验结果
span.innerHTML=alt+"不符合规则";
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();
}
</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()"/>
<span id="unameSpan">
</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>
</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()"></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>