实用的JS表单验证提示效果
errMsg 是一个错误消息的数组,这样方便自定义,errName是对应错误信息元件名数组,这样可以非富自定义显示方式,FormValid.allName记录了所有有验证规则的字段名数级,在自定义中可以使用到。
表单验证提示效果
body{ color:#666666; font-size:12px}
h1{ font-size:20px;}
input{ border:#999999 1px solid; background-color:#FFFFEE}
.button2{ background-color:#FF9900; border-bottom:#E34A00 2px solid;border-right:#E34A00 2px solid; border-top:#FFB693 2px solid;border-left:#FFB693 2px solid; color:#FFFFFF; font-weight:bold}
dl {
font:normal 12px/15px Arial;
position: relative;
width: 350px;
}
dt {
clear: both;
float:left;
width: 80px;
padding: 4px 0 2px 0;
text-align: left;
}
dd {
float: left;
width: 200px;
margin: 0 0 8px 0;
padding-left: 6px;
}
.hint {
display: none;
position: absolute;
right: -160px;
width: 200px;
margin-top: -4px;
border: 1px solid #c93;
padding: 10px 12px;
background: #ffc url(/upload/2009-11/20091104144511488.gif) no-repeat -10px 5px;
}
.hint .hint-pointer {
position: absolute;
left: -10px;
top: 5px;
width: 10px;
height: 19px;
background: url(/upload/2009-11/20091104144511488.gif) left top no-repeat;
}
var FormValid = function(frm) {
this.frm = frm;
this.errMsg = new Array();
this.errName = new Array();
this.required = function(inputObj) {
if (typeof(inputObj) == "undefined" || inputObj.value.trim() == "") {
return false;
}
return true;
}
this.eqaul = function(inputObj, formElements) {
var fstObj = inputObj;
var sndObj = formElements[inputObj.getAttribute('eqaulName')];
if (fstObj != null && sndObj != null) {
if (fstObj.value != sndObj.value) {
return false;
}
}
return true;
}
this.gt = function(inputObj, formElements) {
var fstObj = inputObj;
var sndObj = formElements[inputObj.getAttribute('eqaulName')];
if (fstObj != null && sndObj != null && fstObj.value.trim()!='' && sndObj.value.trim()!='') {
if (fstObj.value 0) {
FormValid.showError(this.errMsg,this.errName);
frt = document.getElementsByName(this.errName[0])[0];
if (frt.type!='radio' && frt.type!='checkbox') {
frt.focus();
}
return false;
} else {
return true;
}
}
this.addErrorMsg = function(name,str) {
this.errMsg.push(str);
this.errName.push(name);
}
this.addAllName = function(name) {
FormValid.allName.push(name);
}
}
FormValid.allName = new Array();
FormValid.showError = function(errMsg) {
var msg = "";
for (i = 0; i \"\"])*$/;
RegExps.isDate = /^\d{4}-\d{1,2}-\d{1,2}$/;
RegExps.isTime = /^\d{4}-\d{1,2}-\d{1,2}\s\d{1,2}:\d{1,2}:\d{1,2}$/;
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function prepareInputsForHints() {
var inputs = document.getElementsByTagName("input");
for (var i=0; i
FormValid.showError = function(errMsg,errName) {
for (key in FormValid.allName) {
document.getElementById('errMsg_'+FormValid.allName[key]).innerHTML = '';
}
for (key in errMsg) {
document.getElementById('errMsg_'+errName[key]).innerHTML = errMsg[key];
}
}
表单验证提示效果
- 帐号:
- 注册帐号(只支持数字和字母,如:love,love520)
- 密码:
- 请输入密码,请最少输入最少6位最多12位密码
- 确认密码:
-
请再输入一次上面的密码
- 邮箱:
- 请输入邮箱(Email),推荐使用网易邮箱@163.com
- 生日:
-
1983
1984
1985
年
5
6
7
12
月
5
6
7
12
日请输入你的生日 - QQ/MSN:
- 请输入你的QQ或MSN号码
- 电话:
- 请输入你的电话
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]