手写验证表单

<!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>

时间： 2024-10-10 05:26:08

手写验证表单的相关文章

Spring框架整合Struts2使用Validation框架验证表单用户输入数据的详细教程

原创整理不易,转载请注明出处:Spring框架整合Struts2使用Validation框架验证表单用户输入数据的详细教程 代码下载地址:http://www.zuidaima.com/share/1778685765291008.htm 在<Struts2教程4:使用validate方法验证数据>中曾讲到使用validate方法来验证客户端提交的数据,但如果使用validate方法就会将验证代码和正常的逻辑代码混在一起,但这样做并不利于代码维护,而且也很难将过些代码用于其他程序的验证.在St

H5利用pattern属性和oninvalid属性验证表单

HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <form action="demo-form.php"> 手机号: <input type="text" name=&q

验证表单是否为空

验证表单是否为空,或者全是数字 可以用   var  reg = /^\s*(\S+)\s*$/;  正则表达式判断. var reg = /^\s*(\S+)\s*$/; if(reg.test(list[i].value)){ //将空格替换 RegExp.$1捕获匹配的非空格 list[i].value=RegExp.$1; }else{ alert('不能为空'); return; }

js 验证表单 js提交验证类

js 验证表单 js提交验证类 附加:js验证radio是否选择 <script language="javascript">function checkform(obj){for(i=0;i<obj.oo.length;i++)         if(obj.oo[i].checked==true) return true; alert("请选择")return false; }</script><form id="f

jquery验证表单 提交表单

问题: jquery中使用submit提交按钮时,当return false后,依然会提交表单. 解决: 使用button按钮,而不是submit按钮 <script type="text/javascript" src="scripts/jquery-2.0.2.js"></script> <script type="text/javascript"> function check(){ var npassw

ExtJS学习笔记3：加载、提交和验证表单

加载数据 1.比较好用的设置form数据的方法: formPanel.getForm().setValues([{id: 'FirstName', value: 'Joe'}]); 其中id值为form中field的name属性值,value为要赋的值 2.通过对象赋值: Ext.define('Request', { extend: 'Ext.data.Model', fields: [ 'FirstName', 'LastName', 'EmailAddress', 'TelNumberCo

ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2在js中用keyup事件来进行操作 3创建ajax格式和内容:格式: $.ajax({ url:"哪一个服务端处理器", data:{"自己起名",所需要传给处理器的数据}, type:"post", dataType:"json"

表单的属性和方法, 获取表单和表单的元素, 验证表单

表单的属性和方法 一. 表单字段的属性(id/name/value/form),这里用value属性来举例 上面的form属性代表获取表单字段的父级表单对象 1. 属性的获取         console.log(document.myform.username.value); 2. 属性的设置            document.myform.username.value="123"; 3. 获取表单字段的父级表单对象 console.log(document.myform.u

js验证表单大全

js验证表单大全1. 长度限制<script>function test() {if(document.a.b.value.length>50){alert("不能超过50个字符!");document.a.b.focus();return false;}}</script><form name=a onsubmit="return test()"><textarea name="b" cols=&