Heim > Artikel > Web-Frontend > 实用的JS表单验证提示效果_表单特效

实用的JS表单验证提示效果_表单特效

WBOYOriginal: 2016-05-16 18:42:381418Durchsuche

errMsg 是一个错误消息的数组，这样方便自定义,errName是对应错误信息元件名数组，这样可以非富自定义显示方式，FormValid.allName记录了所有有验证规则的字段名数级，在自定义中可以使用到。

<title>表单验证提示效果</title> 
<style type="text/css"> 
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; 
} 
</style> 
<script language="JavaScript" type="text/javascript"> 
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 <= sndObj.value) { 
return false; 
} 
} 
        return true; 
}

this.compare = function(inputObj, formElements) { 
        var fstObj = inputObj; 
        var sndObj = formElements[inputObj.getAttribute('objectName')]; 
if (fstObj != null && sndObj != null && fstObj.value.trim()!='' && sndObj.value.trim()!='') { 
if (!eval('fstObj.value' + inputObj.getAttribute('operate') + 'sndObj.value')) { 
return false; 
} 
} 
        return true; 
    } 
     
    this.limit = function (inputObj) { 
        var len = inputObj.value.length; 
        if (len) { 
            var minv = inputObj.getAttribute('min'); 
            var maxv = inputObj.getAttribute('max'); 
            minv = minv || 0; 
            maxv = maxv || Number.MAX_VALUE; 
            return minv <= len && len <= maxv; 
        } 
        return true; 
    } 
     
    this.range = function (inputObj) { 
        var val = parseInt(inputObj.value); 
        if (inputObj.value) { 
            var minv = inputObj.getAttribute('min'); 
            var maxv = inputObj.getAttribute('max'); 
            minv = minv || 0; 
            maxv = maxv || Number.MAX_VALUE; 
         
            return minv <= val && val <= maxv; 
        } 
        return true; 
    } 
     
    this.requireChecked = function (inputObj) { 
        var minv = inputObj.getAttribute('min'); 
        var maxv = inputObj.getAttribute('max'); 
        minv = minv || 1; 
        maxv = maxv || Number.MAX_VALUE; 
     
        var checked = 0; 
        var groups = document.getElementsByName(inputObj.name); 
         
        for(var i=0;i<groups.length;i++) { 
            if(groups[i].checked) checked++; 
             
        } 
        return minv <= checked && checked <= maxv; 
    } 
     
    this.filter = function (inputObj) { 
        var value = inputObj.value; 
        var allow = inputObj.getAttribute('allow'); 
        if (value.trim()) { 
            return new RegExp("^.+\.(?=EXT)(EXT)$".replace(/EXT/g, allow.split(/\s*,\s*/).join("|")), "gi").test(value); 
        } 
        return true; 
    } 
     
    this.isNo = function (inputObj) { 
        var value = inputObj.value; 
        var noValue = inputObj.getAttribute('noValue'); 
        return value!=noValue; 
    } 
this.checkReg = function(inputObj, reg, msg) { 
inputObj.value = inputObj.value.trim();

if (inputObj.value == '') { 
return; 
} else { 
if (!reg.test(inputObj.value)) { 
                this.addErrorMsg(inputObj.name,msg); 
            } 
} 
}

this.passed = function() { 
if (this.errMsg.length > 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 < errMsg.length; i++) { 
        msg += "- " + errMsg[i] + "\n"; 
    }

alert(msg); 
} 
function validator(frm) { 
    var formElements = frm.elements; 
    var fv = new FormValid(frm); 
     
    for (var i=0; i<formElements.length;i++) { 
        var validType = formElements[i].getAttribute('valid'); 
        var errorMsg = formElements[i].getAttribute('errmsg'); 
        if (validType==null) continue; 
        fv.addAllName(formElements[i].name);

<h1>表单验证提示效果</h1> 
<form action="" method="post" onsubmit="return validator(this)"> 
<dl> 
    <dt><label for="name">帐号:</label></dt> 
    <dd>
<input name="name" id="name" type="text" valid="required" errmsg="用户名不能为空!"> 
    <span class="hint" id="errMsg_name">注册帐号（只支持数字和字母,如:love,love520）<span class="hint-pointer"></span></span>    </dd> 
     
    <dt><label for="password">密码：</label></dt> 
    <dd>
<input name="password" id="password" type="password" valid="required" errmsg="密码不能为空!"> 
    <span class="hint" id="errMsg_password">请输入密码,请最少输入最少6位最多12位密码<span class="hint-pointer"> </span></span>    </dd> 
     
    <dt><label for="password2">确认密码：</label></dt> 
    <dd> 
    <input name="password2" id="password2" type="password" valid="eqaul" eqaulname="password" errmsg="两次密码不同!"> 
    <span class="hint" id="errMsg_password2">请再输入一次上面的密码<span class="hint-pointer"></span></span>    </dd> 
     
    <dt><label for="email">邮箱:</label></dt> 
    <dd>
<input name="email" id="email" type="text" valid="required|isEmail" errmsg="Email不能为空|Email格式不对!"> 
    <span class="hint" id="errMsg_email">请输入邮箱(Email),推荐使用网易邮箱@163.com<span class="hint-pointer"></span></span>    </dd> 
     
    <dt><label for="year">生日:</label></dt> 
    <dd>
<select id="year" name="year"> 
            <option value="1983">1983</option> 
            <option value="1984">1984</option> 
            <option value="1985">1985</option> 
        </select>年<select name="m" id="m"> 
     <option value="5">5</option> 
     <option value="6">6</option> 
     <option value="7">7</option> 
     <option value="12">12</option> 
</select>月<select name="d" id="d"> 
     <option value="5">5</option> 
     <option value="6">6</option> 
     <option value="7">7</option> 
     <option value="12">12</option> 
</select>日<span class="hint">请输入你的生日<span class="hint-pointer"></span></span> 
    </dd> 
    <dt><label for="qq">QQ/MSN:</label></dt> 
    <dd>
<input name="qq" id="qq" type="text" valid="required" errmsg="没有填写QQ或MSN"> 
    <span class="hint" id="errMsg_qq">请输入你的QQ或MSN号码<span class="hint-pointer"></span></span>    </dd> 
    <dt><label for="tel">电话:</label></dt> 
    <dd>
<input name="tel" id="tel" type="text" valid="required|isMobile" errmsg="手机不能为空|手机格式不对!"> 
    <span class="hint" id="errMsg_tel">请输入你的电话<span class="hint-pointer"></span></span>    </dd> 
    <dt class="button"></dt> 
    <dd class="button"><input type="submit" name="Submit" value=" 提 交 " class="button2"></dd> 
</dl> 
</form>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：一个可以兼容IE FF的加为首页与加入收藏实现代码_基础知识Nächster Artikel：纯JS图片批量预加载技术代码_图象特效

In Verbindung stehende Artikel

Mehr sehen