js验证form表单示例
检测测试了js表单验证，无jQuery（简单的功能有时无需jQuery版本）
js代码如下：
<script type="text/javascript">
function S(ba, hZ) {
try {
return (hZ && (hZ.document || hZ) || document).getElementById(ba);
}
catch (cg) {
return null;
}
}
var show = function(id, isVisible) {
var s1 = isVisible ? "" : "none";
S(id).style.display = s1;
}
var checkAlias = function() {
var _oForm = S("form1"), _oReg = /^[0-9a-zA-Z\.\-_]{4,32}$/, _oRegErr = /(^[\.\-_])|([\.\-_]$)/, _oRegErr2 = /[\.\-_][\.\-_]/, _bInvalid = false, _sMsg = "";
_oForm.alias.value = _oForm.alias.value.trim();
if (_oForm.alias.value == "") {
_bInvalid = true;
_sMsg = "请填写管理员帐号";
}
else if (_oForm.alias.value.length < 4 || _oForm.alias.value.length > 32) {
_bInvalid = true;
_sMsg = "帐号长度不对";
}
else if (!_oReg.test(_oForm.alias.value)) {
_bInvalid = true;
_sMsg = "帐号格式错误";
}
else if (_oRegErr.test(_oForm.alias.value)) {
_bInvalid = true;
_sMsg = "点、减号或下划线不能放在开头或结尾";
}
else if (_oRegErr2.test(_oForm.alias.value)) {
_bInvalid = true;
_sMsg = "点、减号或下划线不能连续出现";
}
if (_bInvalid) {
S("msg_alias_reason").innerHTML = _sMsg;
show("msg_alias_err", true);
show("msg_alias_ok", false);
return false;
}
else {
show("msg_alias_err", false);
show("msg_alias_ok", true);
}
return true;
};
var checkEmail = function() {
var _oForm = S("form1"), _oRegErr = /(^[\.\-_])|([\.\-_]$)/, _oRegEmail = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/, _bInvalid = false, _sMsg = "";
_oForm.email.value = _oForm.email.value.trim();
if (_oForm.email.value == "") {
_bInvalid = true;
_sMsg = "邮箱地址不能为空";
}
else if (_oRegErr.test(_oForm.email.value)) {
_bInvalid = true;
_sMsg = "点、减号或下划线不能放在开头或结尾";
}
else if (_oForm.email.value.length < 10 || _oForm.email.value.length > 32) {
_bInvalid = true;
_sMsg = "请输入正确的邮箱地址";
}
else if (!_oRegEmail.test(_oForm.email.value)) {
_bInvalid = true;
_sMsg = "邮箱格式错误,请重试";
}
if (_bInvalid) {
S("msg_email_reason").innerHTML = _sMsg;
show("msg_email_err", true);
show("msg_email_ok", false);
return false;
}
else {
show("msg_email_err", false);
show("msg_email_ok", true);
}
return true;
};
var checkFormInput = function() {
if (checkAlias() && checkEmail())
return true;
return false;
};
</script>
HTML代码如下：
<form id="form1" method="get" name="form1" onsubmit="return checkFormInput();">
<input type="hidden" name="action" value="signin" />
<div name="Content" class="mainPanel wd txt_left" style="margin-top:20px;">
<div class="regPanel">
<div class="b_size" style="padding:35px;">
<div class="">
<h2 class="bd" style="border-width:0 0 1px 0">用户注册 <span class="notice">(用来管理您企业邮的帐号)</span></h2>
<div class="formPanel" style="padding:20px 0 10px;">
<div class="tr">
<label class="colum" title="管理员帐号用来登录企业邮箱管理面板">用户名：</label>
<input type="text" class="txt b_size" value="" name="alias" onfocus="" onblur="checkAlias();" maxlength="32">
<span id="msg_alias_err" style="padding:0 5px; display:none;"><img align="absmiddle" class="icon_disable_m img_pad" src="dot.gif"><span id="msg_alias_reason" class="txt_red f_size">请填写管理员帐号</span></span>
<span id="msg_alias_ok" style="display: none; "><img align="absmiddle" class="icon_finish_m" src="dot.gif"></span>
</div>
<div class="addrtitle tr f_size tipsInfo">帐号由字母、数字组成，点(.)减号(-)下划线(_)不能放在开头或结尾，也不能连续出现</div>
<div class="tr">
<label class="colum" title="管理员帐号用来登录企业邮箱管理面板">邮箱地址：</label>
<input type="text" class="txt b_size" value="" name="email" onfocus="" onblur="checkEmail();" maxlength="32">
<span id="msg_email_err" style="padding:0 5px; display:none;"><img align="absmiddle" class="icon_disable_m img_pad" src="dot.gif"><span id="msg_email_reason" class="txt_red f_size">请填写管理员帐号</span></span>
<span id="msg_email_ok" style="display: none; "><img align="absmiddle" class="icon_finish_m" src="dot.gif"></span>
</div>
<div class="addrtitle tr f_size tipsInfo">请输入邮箱地址</div>
</div>
</div>
<div class="submitColumn" style="padding-left:105px;"><input type="submit" class="btnSubmit b_size" value="确定"> <a href="/">取消</a></div>
</div>
</div>
</div>
</form>