html表单的验证6,表单验证.html



验证表单

.box{

width:400px;

padding:40px;

border:solid 1px #666;

margin:100px auto 0;

line-height:40px;

}

.box ul li{

list-style: none;

}

#title{

text-align: center;

}

label{

display:inline-block;

width:20%;

}

input{

width:60%;

}

• 个人表单信息验证

• 手机：

• 邮箱：

• 姓名：

(function(window){

function $(id){

return document.getElementById(id);

};

// 获取对象

var iptPhone = $("Phone");

var iptEmail = $("Email");

var iptName = $("Name");

var rxPhone = /^(13[0-9]|15[012356789]|18[0-9]|17[678]|14[57])[0-9]{8}$/;

var rxEmail = /^\w+@\w+\.\w+$/;

var rxName = /^[\u4E00-\u9FA5]{2,}$/;

// 验证手机号

inspect(Phone,rxPhone);

// 验证邮箱

inspect(Email,rxEmail);

// 验证姓名

inspect(Name,rxName);

function inspect(element,regExp){

element.onblur = function(){

var text = this.value;

if( regExp.test( text ) ){

this.nextElementSibling.innerHTML = "正确"

this.nextElementSibling.style.color = "green";

}else{

this.nextElementSibling.innerHTML = "错误"

this.nextElementSibling.style.color = "red";

}

}

}

})(window)

一键复制

编辑

Web IDE

原始数据

按行查看

历史