目录
先用HTML写一个表单【用户名，密码，确认密码，手机号，邮箱，性别，籍贯，验证码】
【均是简单的验证，仅为了展示】
1. 验证用户名
<input type="text" id="uname" onblur="checkname();" /><span id="nameid"></span>设置id用来获取该框内的值
设置onblur 当该输入框失去焦点后执行checkname函数
后面的span设置id，为其赋值
function checkname() {
//1、获取输入框内容,获取span对象 2、创建校验规则 3、开始校验 4、输出校验结果
var uname = document.getElementById('uname').value;
var span = document.getElementById('nameid');
var reg = /^[\u4e00-\u9fa5]{2,4}$/ //匹配2-4个汉字
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 = '用名长度为2-4个汉字';
span.style.color = 'red';
return false;
}
}先获取了输入框内的输入内容
获取span对象
设置正则表达式【匹配2-4个汉字】reg.test()是正则表达式中的函数，符合的返回ture
进入if 先判断用户输入是否为空，为空则更改span的内容与样式
当输入的汉字数量过多或过少时，执行else更改span，符合数量时表示通过，例如绿色的小对勾
2. 验证密码
密码也是相同的操作
<input type="text" id="pwd1" onblur="checkpwd1();" alt="密码" />
<span id="pwdid"></span>function checkpwd1() {
var pwd1 = document.getElementById('pwd1').value;
var span = document.getElementById('pwdid');
var reg = /^[a-z]\w{5,7}$/;
if (pwd1 == '' || pwd1 == null) {
span.innerHTML = '密码不能为空';
span.style.color = 'red';
return false;
} else if (reg.test(pwd1)) {
span.innerHTML = '密码符合要求';
span.style.color = 'green';
return true;
} else {
span.innerHTML = '密码太简单或者不满足（6-8）位';
span.style.color = 'red';
return false;
}
}3. 验证确认密码
仅仅只是将上一步的校验密码改为比对密码
<input type="text" id="pwd2" onblur="checkpwd2();" alt="确认密码" />
<span id="rpwdid"></span>function checkpwd2() {
var pwd1 = document.getElementById('pwd1').value;
var pwd2 = document.getElementById('pwd2').value;
var span = document.getElementById('rpwdid');
if(pwd2 == '' || pwd2 == null){
span.innerHTML = '密码不能为空';
span.style.color = 'red';
return false;
}else if (pwd1 == pwd2) {
span.innerHTML = '密码一致';
span.style.color = 'green';
return true;
} else {
span.innerHTML = '密码不一致';
span.style.color = 'red';
return false;
}
}4.验证手机号与邮箱
还记得类吗，封装这个函数，验证姓名密码手机号的时候对其进行调用，省去一部分代码
传参（要获取内容的id，span的id，验证格式，错误信息）
将span的id写成input框的id+'id'，省去span的id参数，
给input加上alt属性，可以通过获取的input对象[.]获取alt，替换错误信息
要传递的参数就变成了2个，同验证用户名一模一样【返回去更改用户名的校验】
function test(idname, reg) {//用alt代替str
var info = document.getElementById(idname);
var va = info.value;
var alt = info.alt;
var span = document.getElementById(idname + 'id');
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;
}
}手机号与邮箱的html
<input type="text" id="phone" onblur="checkphone();" alt="手机号" />
<span id="phoneid"></span>
<input type="text" id="email" onblur="checkemail();" alt="邮箱" />
<span id="emailid">传入参数即可
function checkphone() {
var reg = /^1[3,4,5,7,8]\d{9}$/;
return test('phone', reg);
}
function checkemail() {
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+.com$/
return test('email', reg);
}5. 验证籍贯
除了value为0的情况下，选择那个都是可以的
为下拉菜单设置失去焦点事件不合理，只要点击鼠标进行滑动均为失去焦点，所以添加值改变事件
<select onchange="check_box();" id="address">
<option selected="selected" value="0">---请选择---</option>
<option value="1">陕西省</option>
<option value="2">山西省</option>
<option value="3">河南省</option>
</select>
<span id="addressid"></span>下拉菜单获取的value是在html中设置的，
使用if仅需判断value是否是0即可
function check_box(){
var sel=document.getElementById('address').value;
console.log(sel);
var span=document.getElementById('addressid');
if(sel != 0){
span.innerHTML = '符合要求';
span.style.color = 'green';
return true;
}else{
span.innerHTML = '不符合要求';
span.style.color = 'red';
return false;
}
}6.验证爱好
注意爱好这里使用的不是id是name，name是以数组的形式存储
<input type="checkbox" name="ho" value="0" onclick="checkhobby();"/>LOL
<input type="checkbox" name="ho" value="1" onclick="checkhobby();"/>睡觉
<input type="checkbox" name="ho" value="2" onclick="checkhobby();"/>听歌
<input type="checkbox" name="ho" value="3" onclick="checkhobby();"/>看电影
<input type="checkbox" name="ho" value="4" onclick="checkhobby();"/>打游戏
<span id="hobbyid"></span>checked：当该框被选择时返回ture，反之为false【console.log()一下】
当所有多选框均执行过后还是没有ture，则span报错【实现至少选择一项的功能】
function checkhobby(){
var favs=document.getElementsByName('ho');
var span=document.getElementById('hobbyid');
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;
}7.验证验证码
.t {
display: inline-block;
width: 80px;
height: 35px;
line-height: 35px;
text-align: center;
background-color: blue;
border-radius: 10px;
color: #fff;
cursor: pointer;
}<input type="text" id="mycode" onblur="checkcode();"/>
<span class="t" onclick="createcode();" id="code"></span>
<span id="testcode"></span>1> 生成验证码
使用Math.random()生成一个随机的0-1的小数，对小数进行*9000+1000的操作【防止0.00...的出现】,在对其进行向下取整
function createcode() {
var code = Math.floor(Math.random() * 9000 + 1000);
var span = document.getElementById('code');
span.innerHTML = code;
console.log(span);2> 比对验证码
将用户输入的内容与span中的内容进行比对，一致则通过，不一致刷新验证码
function checkcode(){
var span=document.getElementById('code').innerText;
var inp=document.getElementById('mycode').value;
var span2=document.getElementById('testcode');
if(span == inp){
span2.innerHTML='验证码通过';
span2.style.color='green';
return true;
}else{
span2.innerHTML='验证码不一致';
span2.style.color='red';
createcode();
return false;
}
}8.验证同意条例
<input type="checkbox" id="agree" onclick="checkagree();"/>同意的条例
<input type="submit" value="免费注册" disabled="disabled" id="sub"/>当该框没有选择时，注册按钮为灰色
当勾选为真时，disabled的属性为假，则失去该属性的效果
function checkagree(){
document.getElementById('sub').disabled=!document.getElementById('agree').checked;
}9. 验证所有表单
只有上面还不够，勾过之后直接提交也是可以通过的
<form action="成功页面.html" onsubmit="return checksubmit()">使用上一节事件的阻断来阻断没有填写就能提交的bug
先执行所有的验证函数【函数中的return是为这里做铺垫】，在返回所有函数的"且"值，checksubmit接收到的值在返回给form，从而形成阻断
function checksubmit(){
checkname();
checkpwd1();
checkpwd2();
checkphone();
checkemail();
check_box();
checkhobby();
checkcode();
return checkname()&&checkpwd1()&&checkpwd2()&&checkphone()&&checkemail()&&check_box()&&checkhobby()&&checkcode();
}10.整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.t {
display: inline-block;
width: 80px;
height: 35px;
line-height: 35px;
text-align: center;
background-color: blue;
border-radius: 10px;
color: #fff;
cursor: pointer;
}
</style>
<script>
function createcode() {
var code = Math.floor(Math.random() * 9000 + 1000);
var span = document.getElementById('code');
span.innerHTML = code;
console.log(span);
}
function checkname() {
//1、获取输入框内容,获取span对象 2、创建校验规则 3、开始校验 4、输出校验结果
var uname = document.getElementById('uname').value;
var span = document.getElementById('nameid');
var reg = /^[\u4e00-\u9fa5]{2,4}$/ //匹配2-4个汉字
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 = '用名长度为2-4个汉字';
span.style.color = 'red';
return false;
}
}
function checkpwd1() {
var pwd1 = document.getElementById('pwd1').value;
var span = document.getElementById('pwdid');
var reg = /^[a-z]\w{5,7}$/;
if (pwd1 == '' || pwd1 == null) {
span.innerHTML = '密码不能为空';
span.style.color = 'red';
return false;
} else if (reg.test(pwd1)) {
span.innerHTML = '密码符合要求';
span.style.color = 'green';
return true;
} else {
span.innerHTML = '密码太简单或者不满足（6-8）位';
span.style.color = 'red';
return false;
}
}
function checkpwd2() {
var pwd1 = document.getElementById('pwd1').value;
var pwd2 = document.getElementById('pwd2').value;
var span = document.getElementById('rpwdid');
if(pwd2 == '' || pwd2 == null){
span.innerHTML = '密码不能为空';
span.style.color = 'red';
return false;
}else if (pwd1 == pwd2) {
span.innerHTML = '密码一致';
span.style.color = 'green';
return true;
} else {
span.innerHTML = '密码不一致';
span.style.color = 'red';
return false;
}
}
//----------------------------------------------------封装校验
function test(idname, reg) {//用alt代替str
var info = document.getElementById(idname);
var va = info.value;
var alt = info.alt;
var span = document.getElementById(idname + 'id');
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 checkphone() {
var reg = /^1[3,4,5,7,8]\d{9}$/;
return test('phone', reg);
}
function checkemail() {
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+.com$/
return test('email', reg);
}
function check_box(){
var sel=document.getElementById('address').value;
console.log(sel);
var span=document.getElementById('addressid');
if(sel != 0){
span.innerHTML = '符合要求';
span.style.color = 'green';
return true;
}else{
span.innerHTML = '不符合要求';
span.style.color = 'red';
return false;
}
}
function checkhobby(){
var favs=document.getElementsByName('ho');
var span=document.getElementById('hobbyid');
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 checksubmit(){
checkname();
checkpwd1();
checkpwd2();
checkphone();
checkemail();
check_box();
checkhobby();
checkcode();
return checkname()&&checkpwd1()&&checkpwd2()&&checkphone()&&checkemail()&&check_box()&&checkhobby()&&checkcode();
}
function checkcode(){
var span=document.getElementById('code').innerText;
var inp=document.getElementById('mycode').value;
var span2=document.getElementById('testcode');
if(span == inp){
span2.innerHTML='验证码通过';
span2.style.color='green';
return true;
}else{
span2.innerHTML='验证码不一致';
span2.style.color='red';
createcode();
return false;
}
}
</script>
</head>
<body onload="createcode();">
<!-- 任务1、form表单校验 2、淘宝网 3、双搜 4、更换背景 -->
<form action="成功页面.html" onsubmit="return checksubmit()">
<table>
<tr>
<td>用户名：</td>
<td>
<input type="text" id="uname" onblur="checkname();" alt="用户名" />
<span id="nameid"></span>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="text" id="pwd1" onblur="checkpwd1();" alt="密码" />
<span id="pwdid"></span>
</td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input type="text" id="pwd2" onblur="checkpwd2();" alt="确认密码" />
<span id="rpwdid"></span>
</td>
</tr>
<tr>
<td>手机号：</td>
<td><input type="text" id="phone" onblur="checkphone();" alt="手机号" />
<span id="phoneid"></span></td>
</tr>
<tr>
<td>邮箱：</td>
<td>
<input type="text" id="email" onblur="checkemail();" alt="邮箱" />
<span id="emailid"></span>
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" id="nan" name="1" checked="checked"/>男
<input type="radio" id="nv" name="1"/>女
</td>
</tr>
<tr>
<td>籍贯：</td>
<td>
<select onchange="check_box();" id="address">
<option selected="selected" value="0">---请选择---</option>
<option value="1">陕西省</option>
<option value="2">山西省</option>
<option value="3">河南省</option>
</select>
<span id="addressid"></span>
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="ho" value="0" onclick="checkhobby();"/>LOL
<input type="checkbox" name="ho" value="1" onclick="checkhobby();"/>睡觉
<input type="checkbox" name="ho" value="2" onclick="checkhobby();"/>听歌
<input type="checkbox" name="ho" value="3" onclick="checkhobby();"/>看电影
<input type="checkbox" name="ho" value="4" onclick="checkhobby();"/>打游戏
<span id="hobbyid"></span>
</td>
</tr>
<tr>
<td>验证码：</td>
<td>
<input type="text" id="mycode" onblur="checkcode();"/>
<span class="t" onclick="createcode();" id="code"></span>
<span id="testcode"></span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="checkbox" id="agree" onclick="checkagree();"/>同意的条例<br />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="免费注册" disabled="disabled" id="sub"/><br />
</td>
</tr>
</table>
</form>
</body>
</html>下节 对table的操作
1763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
