• 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-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>

  • 相关阅读:
    各大厂面试遇到的91道软件测试面试题+答案纯干货!!
    测试岗面试必看攻略
    自动化测试面试题及答案大全(1)
    自动化测试面试题及答案大全(2)
    自动化测试面试题及答案大全(3)
    自动化测试面试题及答案大全(4)
    自动化测试面试题及答案大全(5)
    Android反编译&Android安全测试
    ALV布局保存
    雨伞的主要材料有哪些?
  • 原文地址:https://www.cnblogs.com/meimao5211/p/3229309.html
Copyright © 2020-2023  润新知