|
本地javascript（纯天然代码）验证，本地验证主要分2部分：
一、和用户的表单交互
首先需要编写用于表单交互的函数，该函数需要在页面加载时加载，格式如下：window.onload=function (){}
接着用getElement的方法获取相应的标签在function函数里定义为全局变量。
然后在function内编写这些变量的事件，用到的三大事件分别为：onfocus（获取焦点事件）、onkeyup（键盘事件）、onblur（失去焦点事件）。
用法：以onfocus为例如下：
pwd.onfocus=function(){//变量pwd的获取焦点事件
pwd_msg.style.display="block";
pwd_msg.innerHTML='6-16个字符，请使用字母加数字或符号的组合密码，不能单独使用字母、数字或符号。 ';
}
二、点击提交按钮是对表单的检验
主要用到onsumit（表单提交前）事件，用法如下：
需要在function外单独再编写check函数。
三、完整源代码及运行截图献上
DOCTYPE html>
验证码
#header{ width:95%; height:100px; padding-left:5%; clear:both; border-bottom:#CCC dashed thin ;}
#header img{width:80px; height:80px; float:left; border-radius:40px; margin-top:10px ;margin-bottom:10px; }
#header h1{display:inline-block; margin-left:20px;}
#main{ width:100%; height:auto;}
body,div,dl,dd,ul,ol,li{ margin:0;padding:0; font:12px/1.5"宋体","Arial",color:#666;}
body{background:url(uploads/0911454230045.png) no-repeat; background-size:700px,450px; background-position:50px 120px;}
img{ border:none}
input,select,img{ vertical-align:middle}/*有疑惑*/
lable{vertical-align:middle}
form{ width:450px; height:500px; margin-top:130px; margin-right:80px;float:right; }
form div{ overflow:hidden; clear:both}
form div label{float:left; clear:both;}
form div label .text{ width:152px; height:26px; padding:0 2px; border:1px solid #ccc }
form div label b{ font-weight:normal; font-size:12px; color:#ccc; visibility:hidden}/*有疑惑*/
form div em{ display:inline-block; font-family:12px; text-align:center;color:#fff; vertical-align:middle; font-style:normal; width:53px;height:15px; line-height:15px; background-color:#ffd099}
form div .active{ background-color:#ff6600}
div span{ display:inline-block; width:80px; text-align:right}
.submitBtn{width:135px; height:33px; background:url(); color:red; margin:20px 0 0 80px;}/*需完善*/
.changeimg{ width:22px; height:22px; display:inline-block; vertical-align:middle;background:url(uploads/img1.png) no-repeat 5px 1px}/*需完善*/
.msg{ line-height:14px; color:#999; float:left; margin-left:5px;margin-top:2px; display:none; }
.msg i{ display:inline-block; vertical-align:middle; width:25px; height:20px; background:url(uploads/img1_1.png) no-repeat}
/*.msg .ati{ background:0 -71px}
.msg .err{background:0 -39px}
.msg .ok{background:0 -99px}
*/
function getLength(str){
return str.replace(/[^\x00-xff]/g,"xx").length;//使用替换函数将正则值替换为xx
}
function findStr(str,n){//检测是否密码为连续的相同字符
var tmp=0;
for(var i=0;i25){
name_msg.innerHTML='长度超过25个字符';
}
//长度少于6个字符
else if(name_length5){
aEm[1].className="active";
pwd2.removeAttribute("disabled");//移除禁用属性
pwd2_msg.style.display="block";
}
else{
aEm[1].className="";
pwd2_msg.style.display="none";
pwd2.disabled="true";//重新设置为禁用状态
}
//大于10个字符"强"
if(this.value.length>10){
aEm[2].className="active";
pwd2_msg.style.display="block";
}
else{
aEm[2].className="";
}
}
pwd.onblur=function(){
var m=findStr(pwd.value,pwd.value[0]);
//不能为空
if(this.value==""){
pwd_msg.innerHTML='不能为空';
}
//不能用相同字符
else if(m==this.value.length){
pwd_msg.innerHTML='不能使用相同字符';
}
//长度应为6-16个字符
else if(this.value.length16){
pwd_msg.innerHTML='长度应为6-16个字符';
}
//不能全为数字
else if(!re_n.test(this.value)){
pwd_msg.innerHTML='不能全为数字';
}
//不能全为字母
else if(!re_t.test(this.value)){
pwd_msg.innerHTML='不能全为字母';
}
//ok
else{
pwd_msg.innerHTML='ok';
}
}
//确认密码
pwd2.onblur=function(){
if(this.value!=pwd.value){
pwd2_msg.innerHTML='两次输入密码不一致！';
}
else{
pwd2_msg.innerHTML='ok！';
}
}
//验证码
ma1.onblur=function(){
if(ma1.value==code){
ma.style.display="block";
ma.innerHTML='ok';
}
else{
ma.style.display="block";
ma.innerHTML='验证码输入有误';
code = "";
createCode(); //生成新的验证码
}
}
}
//下面为check函数进行提交前的验证
function check(){
var alnput=document.getElementsByTagName('input');
var oName=alnput[0];
var pwd=alnput[1];
var pwd2=alnput[2];
var ma1=alnput[3];
var ma2=alnput[4];
var subt=alnput[5];
var aP=document.getElementsByTagName('p');//ap中的P为大写
var name_msg=aP[0];
var pwd_msg=aP[1];
var pwd2_msg=aP[2];
var count=document.getElementById('count');
var aEm=document.getElementsByTagName('em');
var name_length=0;
//1.数字、字母(不分大小写)、汉字、下划线
//2. 5-25字符，推荐使用中文
//\u4e00-\u9fa5(这是汉字的范围)
var re=/[^\w\u4e00-\u9fa5]/g;
var re_n=/[^\d]/g;
var re_t=/[^a-zA-Z]/g;
var k=1;
var re=/[^\w\u4e00-\u9fa5]/g;
//用户名
name_length=getLength(oName.value);
if (oName.value==""){
name_msg.style.display="block";
name_msg.innerHTML='请输入用户名';
k=k+1;
}
else if(re.test(oName.value)){
name_msg.innerHTML='含有非法字符';
k=k+1;
}
//长度超过25个字符
else if(name_length>25){
//name_msg.innerHTML='长度超过25个字符';
k=k+1;
}
//长度少于6个字符
else if(name_length |