zoukankan      html  css  js  c++  java
  • 表单验证

    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 = /[wu4e00-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 = /[^wu4e00-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("密码为空或者两次密码输入不一致");
            }
         });
    })
  • 相关阅读:
    vue cli 3.0安装、项目创建
    Vue-详解设置路由导航的两种方法
    VUE项目启动流程
    vue项目创建
    前端UI优秀框架
    Spring MVC返回JSON的几种方法
    Cookie 和 Session 的区别
    Object.defineProperty()
    vuex getter传入参数
    后台管理系统权限控制的思路
  • 原文地址:https://www.cnblogs.com/gyx19930120/p/4419936.html
Copyright © 2011-2022 走看看