手写验证表单
Posted 张正--博客园
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手写验证表单相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0; padding: 0;}
body,html{width: 100%;height: 100%; font-size: 20px;background: #ccc;}
#box{width: 550px; background: pink; margin: 100px auto;}
p{line-height: 54px;overflow: auto;}
lable{float: left;}
input{width: 400px;height: 50px;display: inline;float: right;}
span{display: block; margin-left:150px; display: none;}
#yanzheng{cursor:pointer;width: 60px; height: 30px;border: 1px solid green;position: absolute;left: 430px;top: 437px;}
#res{width: 600px; height: 300px; border: 1px solid red; margin: 50px auto;}
</style>
</head>
<body>
<div id="box">
<p><lable>用户名：</lable><input type="text" name="text" id="text" placeholder=" 请输入用户名..." /></p>
<div style="clear: both;"></div>
<span id="span1">用户名必须是字母开头</span>
<p><lable>密码：</lable><input type="text" name="mima" id="mima" placeholder=" 请输入密码..." /></p>
<div style="clear: both;"></div>
<span id="span2">密码必须为纯数字且在6位到12位之间</span>
<p><lable>确认密码：</lable><input type="text" name="mima" id="mima1" placeholder=" 请再次输入密码..." /></p>
<div style="clear: both;"></div>
<span id="span3">两次密码输入不一致</span>
<p><lable>邮箱：</lable><input type="text" name="mima" id="email" placeholder=" 请输入密保邮箱..." /></p>
<div style="clear: both;"></div>
<span id="span4">格式错误</span>
<p><lable>手机号：</lable><input type="text" name="mima" id="phone" placeholder=" 请输入您的手机号..." /></p>
<div style="clear: both;"></div>
<span id="span5">请输入正确的手机号</span>
<p><lable>身份证：</lable><input type="text" name="mima" id="shenfenzheng" placeholder=" 请输入您的身份证号码..." /></p>
<div style="clear: both;"></div>
<span id="span6">请输入正确的身份证号</span>
<p><lable>验证码：</lable><input type="text" name="suiji" id="suiji" placeholder="请输入正确的验证码" /></p>
<span id="span7">验证码错误</span>
<div style="clear: both;"></div>
<div id="yanzheng"></div>
<input type="button" name="btn" id="btn" value="提交" />
</div>
<div id="res"> </div>
<script type="text/javascript">
var box = document.getElementById("box")
var res = document.getElementById("res")
var yohu = document.getElementById("text");
var mima = document.getElementById("mima");
var mima1 = document.getElementById("mima1");
var email = document.getElementById("email");
var phone = document.getElementById("phone");
var shenfen = document.getElementById("shenfenzheng");
var span1 = document.getElementById("span1");
var span2 = document.getElementById("span2");
var span3 = document.getElementById("span3");
var span4 = document.getElementById("span4");
var span5 = document.getElementById("span5");
var span6 = document.getElementById("span6");
var span7 = document.getElementById("span7");
var btn = document.getElementById("btn");
var suiji= document.getElementById("suiji");
var yanzheng =document.getElementById("yanzheng")
yohu.onblur = function(){
var reg = /^[a-zA-Z]\w+$/;;
alert(val)
if(reg.test(yohu.value)){
span1.style.display= ‘none‘;
}else{
span1.style.display= ‘block‘;
}
}
mima.onblur = function(){
var reg = /^[1-9]\d{5,11}$/;
if(reg.test(mima.value)){
span2.style.display= ‘none‘;
}else{
span2.style.display= ‘block‘;
}
}
mima1.onblur = function(){
if(mima.value == mima1.value){
span3.style.display = ‘none‘;
}else{
span3.style.display = ‘block‘;
}
}
email.onblur = function(){
var reg = /^\[email protected][0-9a-zA-Z]{2,3}\.(com|cn|net)$/
if(reg.test(email.value)){
span4.style.display= ‘none‘;
}else{
span4.style.display= ‘block‘;
}
}
phone.onblur = function(){
var reg = /^1\d{10}$/;
if(reg.test(phone.value)){
span5.style.display= ‘none‘;
}else{
span5.style.display= ‘block‘;
}
}
shenfen.onblur = function(){
var reg = /^[1-9]\d{5}(19[0-9][0-9]|20(0[0-9]|1[0-6]))(0[0-9]|1[0-1])(0[1-9]|[1-2][0-9]|3[0-1])\d{3}([0-9]|x)$/;
if(reg.test(shenfen.value)){
span6.style.display= ‘none‘;
}else{
span6.style.display= ‘block‘;
}
}
yanzheng.onclick = function(){
var val1 = run()
var val2 = run1()
var val3 = run2()
var val4 = run3()
function run(){
return Math.floor(Math.random()*10)
}
function run1(){
return Math.floor(Math.random()*10)
}
function run2(){
return Math.floor(Math.random()*10)
}
function run3(){
return Math.floor(Math.random()*10)
}
var str = ‘‘;
str+=val1
str+=val2
str+=val3
str+=val4
// arr.push(val1);
// arr.push(val2);
// arr.push(val3);
// arr.push(val4);
yanzheng.innerHTML = str;
suiji.onblur = function(){
var val = suiji.value;
if(val ==str){
span7.style.display = ‘none‘;
}else{
span7.style.display = ‘block‘;
}
}
}
btn.onclick = function(){
var p = document.createElement(‘p‘);
p.innerHTML = yohu.value;
res.appendChild(p)
var p1 = document.createElement(‘p‘);
p1.innerHTML = mima.value;
res.appendChild(p1)
var p2 = document.createElement(‘p‘);
p2.innerHTML = mima1.value;
res.appendChild(p2)
var p3 = document.createElement(‘p‘);
p3.innerHTML = email.value;
res.appendChild(p3)
var p4 = document.createElement(‘p‘);
p4.innerHTML = phone.value;
res.appendChild(p4)
var p5 = document.createElement(‘p‘);
p5.innerHTML = shenfen.value;
res.appendChild(p5)
}
</script>
</body>
</html>
以上是关于手写验证表单的主要内容，如果未能解决你的问题，请参考以下文章