码迷,mamicode.com
首页 > 其他好文 > 详细

表单验证

时间:2015-04-12 18:59:47      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:

javascript版:
function getLength(str){   //检测输入字符的字符串长度
    return str.replace(/[^\x00-xff]/g,"xx").length;//
}
function findStr(str,n){  //比较字符是否相同
    var num = 0;
    for(var i=0;i
        if(str.charAt(i)==n)
        {
            num++;
        }
    }
    return num;
}
window.onload = function(){
    var aInput = document.getElementsByTagName ("input");//取出所有表单里所有输入框
    var oName = aInput[0];//用户名
    var pwd = aInput[1];//密码
    var pwd2 = aInput[2];//确认密码
    var aP = document.getElementsByTagName ("p");//取出输入框后面的文字反馈
    var name_msg = aP[0];
    var pwd_msg = aP[1];
    var pwd2_msg = aP[2];
    var count = document.getElement ById ("count");//统计用户名输入的字符个数
    var aEm = document.getElementsByTagName ("em");//验证密码输入的强度
    var name_length = 0;
    //测试
 
    //1.数字、字母(不区分大小写)、汉字、下划线
    //2.5-25个字符,推荐使用中文名(\u4e00-\u9fa5)
    //var re = /[\w\u4e00-\u9fa5]/g;//匹配英文字母、数字、下划线和汉字
    
   
    oName.onfocus = function(){   //用户名输入框获得焦点
        name_msg.style.display = "block";
        name_msg.innerHTML = "5-25个字符,推荐使用中文名。";
    }
    oName.onkeyup = function(){   //键盘松开
        count.style.visibility = "visible";//字符统计元素显示
        name_length = getLength(this.value);
        count.innerHTML = name_length+"个字符";    `
        if(name_length == 0)
        {
            count.style.visibility = "hidden";
        }
    }
    oName.onblur = function(){   //用户名输入框失去焦点
        //含有非法字符,不能为空,长度超过25个字符,长度少于6个字符
        var re = /[^\w\u4e00-\u9fa5]/g;  //匹配所有非英文字母、数字、下划线和汉字
        if(re.test(this.value))
        {
            name_msg.innerHTML = "含有非法字符";
        }
        else if(this.value == "")
        {
            name_msg.innerHTML = "不能为空";
        }
        else if(name_length>25)
        {
            name_msg.innerHTML = "长度超过25个字符";
        }
        else if(name_length<6)
        {
            name_msg.innerHTML = "长度少于6个字符";
        }
        else
        {
            name_msg.innerHTML = "OK";
        }
    }
 
    pwd.onfocus = function(){
        pwd_msg.style.display = "block";
        pwd_msg.innerHTML = "6-16个字符,请使用字母加数字或符号的组合密码,不能单独使用字母、数字或符号。";
    }
    pwd.onkeyup = function(){
        //大于5个字符 “中”
        if(this.value.length>5)
        {
            aEm[1].className = "active";
            pwd2.removeAttribute("disabled");
            pwd2_msg.style.display = "block";
        }
        else
        {
            aEm[1].className = "";
            pwd2.setAttribute("disabled");
            pwd2_msg.style.display = "none";
        }
        //大于10个字符 “强”
        if(this.value.length>10)
        {
            aEm[2].className = "active";
        }
        else
        {
            aEm[2].className = "";
        }
    }
    pwd.onblur = function(){
        var m = findStr(pwd.value,pwd.value[0]);
        var re_n = /[^\d]/g; //匹配所有非数字字符
        var re_t = /[^a-zA-Z]/g; //匹配所有非英文字母字符
        if(this.value == "")
        {
            pwd_msg.innerHTML = "不能为空";
        }
        else if(m == this.value.length)
        {
            pwd_msg.innerHTML = "不能用相同字符";
        }
        else if(this.value.length<6||this.value.length>16)
        {
            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 = "不能全为字母";
        }
        else
        {
            pwd_msg.innerHTML = "OK";
        }
    }
 
   
    pwd2.onblur = function(){
        if(this.value != pwd.value)
        {
            pwd2_msg.innerHTML = "两次输入的密码不一致!";
        }
        else
        {
            pwd2_msg.innerHTML = "OK";
        }
    }
}
 
jQuery版:
$(function(){
     $("#name").blur(function(){//用户名文本框失去焦点触发验证事件
        if($(this).val() && $(this).val().match("^[a-zA-Z0-9]"))//验证用户名不能为空并且只能为"[A-Z][a-z][0-9]"组成
        {
            $("#nameTip").html("");
        }
        else
        {
            $("#nameTip").html("用户名不能为空且只能为英文或者数字");
        }
     });
     
     $("#email").blur(function(){ //邮箱文本框失去焦点时触发验证事件
if($(this).val() && $(this).val().match("/^[a-z]([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})?$"))//验证邮箱不能为空并且格式要求正确
$("#emailTip").html("");
}
else
{
            $("#emailTip").html("邮箱不能为空且必须格式正确");
        }
});
 
     $("#pas1").blur(function(){//密码文本框失去焦点触发验证事件
        if($(this).val() && $(this).val().match("^[a-zA-Z0-9]"))//验证密码不能为空并且只能为"[A-Z][a-z][0-9]"组成
        {
            $("#pas1Tip").html("");
        }
        else
        {
            $("#pas1Tip").html("密码不能为空且只能为英文或者数字");
        }
     });
 
     $("#pas2").blur(function(){//确认密码文本框失去焦点触发验证事件
        if($(this).val() && $(this).val().match("^[a-zA-Z0-9]") &&$(this).val() == $("#pas1").val())//验证密码不能为空或者两次密码输入是否一致
        {
            $("#pas2Tip").html("");
        }
        else
        {
            $("#pas2Tip").html("密码为空或者两次密码输入不一致");
        }
     });
})

表单验证

标签:

原文地址:http://www.cnblogs.com/gyx19930120/p/4419936.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!