js验证form表单示例

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">用户注册 &nbsp;<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="确定">&nbsp;&nbsp;<a href="/">取消</a></div>

</div>

</div>

</div>

</form>