简单的表单验证

主页面如下

 验证图

 

 实现代码

通过ID属性查找对象，可以节省一些代码

 function $(id) {
        return document.getElementById(id);
    }

 产生1-9,a-z,A-Z,之间的随机组合

 function yz() {
        //随机出4个0-字符串长度之间的数字 做为下标
        yzmStr="";
        for(var i=1;i<=4;i++){
            yzmStr+=str.substr(Math.round(Math.random()*(str.length-1)),1);
        }
        //把验证码赋值到页面
        $("syzm").innerHTML=yzmStr;
    }

      我们要进行验证的就先得获取到文本框中的值，所以我们要通过ID属性获取到值，然后在判断  

    function login_yz() {
        //验证 用户名 和 密码不能为空 
        //获取用户名
        var uname = $("uname").value;    
        if(uname.length==0){
            alert("用户名不能为空");
            return false;
        }
        //获取密码
        var upwd = $("upwd").value;
        if(upwd.length==0){
            alert("密码不能为空");
            return false;
        }
        
        //获取验证码:判断和电脑的验证码是否相等
        //PS：自己实现-输入的验证码不区分大小写-大小写转换
        var yzm = $("uyzm").value;
        if(yzm!=yzmStr){
            alert("验证码输入错误，请重新输入");
            //清空输入的验证码
            $("uyzm").value="";
            //重新生成验证码
            yz();
            return false;
        }
    }

如果文本框里没有值没有就弹框提示，返回false是应为我们后面用到了onsubmit，

来阻止错误信息还可以跳转页面的情况，

验证码错误后调用yz()方法是用来刷新验证码的