简易注册页面表单验证

Html

Css


    
        
            用户名：
            
            用户名由5-12位字符组成，不能包含数字
        
        
            密码：
            
            密码由4-10位字符组成
        
        
            确认密码：
            
            
        
        
            性别：
            
                男      
                女
            
            
        
        
            电子邮箱：
            
            邮箱格式示例：Damon@126.com
        
        
            手机号码：
            
            
        
        
            出生日期：
            
            请按xxxx-xx-xx输入出生日期(年限范围是1900-2017)

table {
	text-align:center;
	margin-top:5%;
}
label {
	float:right;
}
.y_span {
	color:#9C9A9A;
}
.r_span {
	color:red;
}
.g_span {
	color:green;
}

//页面加载使用
window.onload = function onld() {
    window.status = "正在注册...";
}

//验证用户名
var username;
var cn;

//alert(username);
}
//验证密码
var password;

}
//确认密码验证
var yzpwd;

}

//验证性别选择
var sex;
var b;

function checksex() {
    sex = document.getElementsByName("sex");
    cn = document.getElementById('y_sex');
    for (var i = 0; i < sex.length; i++) {
        if (sex[i].checked) //验证两个单选框的选择情况
        {
            document.getElementById("y_sex").innerHTML = "已选择";
            cn.className = 'g_span';
            b = true;
            break;
        } else {
            document.getElementById("y_sex").innerHTML = "未选择";
            cn.className = 'r_span';
            b = false;
        }

}

}
//电子邮箱验证
var email;

//验证手机号码
var phone;

//验证出生年月
var bday;

//注册验证
function zhuce() {
    if (checkusername() && checkpassword() && yzpassword() && checkemail() && checkphone() && checkday() && b) {
        alert(username + "：注册成功！");
        var s = document.getElementsByTagName("input").length;
        //提交后，清除文本框，提示框内容，并取消单选框选择
        for (var i = 0; i < s; i++) {
            document.getElementsByTagName("input")[i].value = "";
            document.getElementsByTagName("span")[i].innerHTML = "";
            document.getElementsByTagName("input")[i].checked = false;;
        }

} else {
        alert("对不起，注册失败！");
    }
}
//退出方法
function out() {
    if (window.confirm("确定退出系统吗？")) {
        window.close();
    }

}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

简易注册页面表单验证



代码描述：做到了一个简单的注册页面的交互，学校学的简单知识，分享交流一下，还希望大家多多照顾多多提拔

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

空白

相关代码