JS
window.addEventListener("load",load,false);
//表单验证监控变量,当值大于等于3,说明通过了用户名、Email和URL验证,则允许提交
var key = 0;
function load(){
//检查用户名
var name = document.myform.name;
name.addEventListener("change",function(){
check(this, isname, "* 请输入真实的中文名字!" )
},false);
//检查Email
var email = document.myform.email;
email.addEventListener("change",function(){
check(this, isemail, "* 请输入合法的Email地址!" )
},false);
//检查URL
var url = document.myform.website;
url.addEventListener("change",function(){
check(this, isurl, "* 请输入合法的URL地址!" )
},false);
document.myform["submit"].addEventListener("click",function(event){
//检查性别是否选中
var sex = document.myform.gender;
var err_ele = get_title( sex[1] );
if (!sex[0].checked && !sex[1].checked ){
err_ele.innerHTML = "* 请选择性别!";
}else{
err_ele.innerHTML = "*";
if(!sex.added){
key += 1;
sex.added = true;
};
};
//根据验证监控变量确定是否允许提交表单,只有通过了4个必必填项目才允许
if(key < 4 ){
var event = event || window.event;
event.preventDefault(); // 兼容标准浏览器
window.event.returnValue = false; // 兼容IE6~8
return false;
}
},false);
}
//检查函数
function check(id, isfn, err ){
var ele = (typeof id == "object")?id: document.getElementById( id );
var isfn = isfn;
var err = err;
var err_ele = get_title(ele);
if (isfn(ele.value)==null) {
if(ele.added){
key -= 1;
ele.added = false;
};
err_ele.innerHTML = err;
}
else{
if(!ele.added){
key += 1;
ele.added = true;
};
err_ele.innerHTML = "*";
}
}
//找到表单对象ele后面的错误提示框
function get_title(ele){
var _ele = ele.nextSibling;
while(_ele){
if(_ele.nodeType == 1 && _ele.className == "error") return _ele;
_ele = _ele.nextSibling;
}
return null;
}
//检查用户名
function isname(str){
var reg = /^[\u4E00-\u9FA5]{2,5}(?:·[\u4E00-\u9FA5]{2,5})*$/;
return reg.exec(str);
}
//检查URL
function isurl(str){
var reg = /^((http|https):\/\/(\w+:{0,1}\w*@)?(\S+)|)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/;
return reg.exec(str);
}
//检查Email
function isemail(str){
var reg = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
return reg.exec(str);
}