jQuery表单验证提交：前台验证二（图文+视频）-pengetahuan html-php.cn

Rumah

pengaturcaraan harian

pengetahuan html

jQuery表单验证提交：前台验证二（图文+视频）

藏色散人

Oct 23, 2018 am 10:12 AM

本篇文章主要给大家详细介绍jQuery实现表单验证提交的具体方法。

在上一篇文章【jQuery表单验证提交：前台验证一】中，已经给大家简单列举了jQuery实现表单验证提交的具体方法代码。那么本节内容就详细的为大家介绍，jQuery实现表单验证提交的具体方法。

主要代码示例如下：

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jQuery用户注册表单验证代码</title>
    <link href="css/jq22.css" rel="stylesheet" type="text/css"/>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script language=&#39;javascript&#39; src="js/jq22.js"></script>
</head>
<body>
<div class=&#39;body_main&#39;>

    <div class=&#39;index_box&#39; style=&#39;margin-top:20px;&#39;>
        <div style="position:fixed;color:red;margin:70px 0 0 450px;font-size:16px;Z-index:100;display:block;"
             id="hint"></div>
        <div class=&#39;box_title&#39;>
            <div class=&#39;text_content&#39;>
                <h1>jQuery用户注册表单验证代码</h1>
            </div>
        </div>
        <div class=&#39;box_main&#39;>
            <div id="register" class="register">
                <form id="form" action="check1.php" method="post" onSubmit="return check();">
                    <div id="form_submit" class="form_submit">
                        <div class="fieldset">
                            <div class="field-group">
                                <label class="required title">手机号码</label>
                                <span class="control-group" id="mobile_input">
                <div class="input_add_long_background">
                  <input class="register_input" type="text" id="mobile" name="mobile" maxLength="11" value=""
                         onblur="__changeUserName(&#39;mobile&#39;);">
                </div>
                </span>
                                <label class="tips">仅用于发送服务开通与到期提醒以及紧急故障方便联系到您，绝对保密</label>
                            </div>
                            <div class="field-group">
                                <label class="required title">邮箱</label>
                                <span class="control-group" id="email_input">
                <div class="input_add_long_background">
                  <input class="register_input" type="text" id="email" name="email" maxLength="50" value=""
                         onblur="__changeUserName(&#39;email&#39;);">
                </div>
                </span>
                                <label class="tips">请输入您常用的邮箱</label>
                            </div>
                            <div class="field-group">
                                <label class="required title">设置密码</label>
                                <span class="control-group" id="password1_input">
                <div class="input_add_long_background">
                  <input class="register_input" type="password" id="password1" name="password1" maxLength="20" value=""
                         onblur="checkPwd1(this.value);"/>
                </div>

                </span>
                                <label class="tips">请使用6~20个英文字母（区分大小写）、符号或数字</label>
                            </div>
                            <div class="field-group">
                                <label class="required title">确认密码</label>
                                <span class="control-group" id="password2_input">
                <div class="input_add_long_background">
                  <input class="register_input" type="password" id="password2" name="password2" maxLength="20" value=""
                         onblur="checkPwd2(this.value);"/>
                </div>

                </span>
                                <label class="tips">请输入确认密码，要和上面的密码一致</label>
                            </div>
                        </div>
                    </div>
                    <div id="div_submit" class="div_submit">
                        <div class=&#39;div_submit_button&#39;>
                            <input id="submit" type="submit" value="注册" class=&#39;button_button disabled&#39;>
                        </div>
                    </div>
                </form>
            </div>
            <script type="text/javascript">
                function __changeUserName(of) {
                    var username = $(&#39;#&#39; + of).val();
                    if (of == &#39;email&#39;) {
                        if (username.search(/^[\w\.+-]+@[\w\.+-]+$/) == -1) {
                            showTooltips(&#39;email_input&#39;, &#39;请输入正确的Email地址&#39;);
                            return;
                        }
                    }
                    else {
                        if (username == &#39;&#39; || !isMobilePhone(username)) {
                            showTooltips(&#39;mobile_input&#39;, &#39;请输入正确的手机号码&#39;);
                            return;
                        }
                    }
                }

                function checkPwd1(pwd1) {
                    if (pwd1.search(/^.{6,20}$/) == -1) {
                        showTooltips(&#39;password1_input&#39;, &#39;密码为空或位数太少&#39;);
                    } else {
                        hideTooltips(&#39;password1_input&#39;);
                    }
                }

                function checkPwd2(pwd2) {
                    var pas1 = $(&#39;#password1&#39;).val();
                    if (pwd2.search(/^.{6,20}$/) == -1) {
                        showTooltips(&#39;password2_input&#39;, &#39;密码为空或位数太少&#39;);
                    }
                    if (pwd2 != pas1) {
                        showTooltips(&#39;password2_input&#39;, &#39;两次密码不一致&#39;);
                    }
                }

                function check() {
                    hideAllTooltips();
                    var ckh_result = true;
                    // if ($(&#39;#email&#39;).val() == &#39;&#39; || !isEmail($(&#39;#email&#39;).val())) {
                    //     showTooltips(&#39;email_input&#39;, &#39;请输入正确的Email地址&#39;);
                    //     ckh_result = false;
                    // }
                    if ($(&#39;#password1&#39;).val() == &#39;&#39;) {
                        showTooltips(&#39;password1_input&#39;, &#39;密码不能为空&#39;);
                        ckh_result = false;
                    }
                    if ($(&#39;#password2&#39;).val() == &#39;&#39;) {
                        showTooltips(&#39;password2_input&#39;, &#39;确认密码不能为空&#39;);
                        ckh_result = false;
                    }
                    if ($(&#39;#password2&#39;).val() != $(&#39;#password1&#39;).val()) {
                        showTooltips(&#39;password2_input&#39;, &#39;两次密码不一致&#39;);
                        ckh_result = false;
                    }
                    if ($(&#39;#mobile&#39;).val() == &#39;&#39; || !isMobilePhone($(&#39;#mobile&#39;).val())) {
                        showTooltips(&#39;mobile_input&#39;, &#39;手机号码不正确&#39;);
                        ckh_result = false;
                    }

                    return ckh_result;
                }

                function isMobilePhone(value) {
                    if (value.search(/^(\+\d{2,3})?\d{11}$/) == -1) {
                        return false;
                    }
                    else
                        return true;
                }

                function isEmail(value) {
                    if (value.search(/^[\w\.+-]+@[\w\.+-]+$/) == -1) {
                        return false;
                    }
                    else
                        return true;
                }
            </script>
        </div>
        <div class=&#39;box_bottom&#39;></div>
    </div>
</div>

</body>
</html>

Salin selepas log masuk

上述代码中，我们简单的写了一个form表单，将前台数据提交到check1.php，提交方式为post，并且给form表单一个点击事件。

当我们点击提交的时候，就会进行一系列信息判断。而当我们没有点击注册也就是没有触发点击事件的话，也会有判断。

如代码中的__changeUserName方法，在此方法中，我们首先通过正则表达式判断邮箱格式是否正确，手机号码是否正确。以及在checkPwd1和checkPwd2方法中，判断密码是否符合要求，是否与第一次密码相同。这些方法都是在没有点击注册按钮时发生的验证。

当然有这些判断也是不够的，所以我们需要写一个点击注册时会发生的验证，如上代码中的check方法，其中我们将每个字段都进行了判断（后台需要的字段都需要进行验证）。

除了上述中点击注册的验证方法外，我们也可以给点击注册的按钮绑定一个事件来判断验证。这里就不一一赘述了。

其中涉及到的js和css代码，在上一篇文章【jQuery表单验证提交：前台验证一】中都有，需要的朋友可以前去参考。

本篇文章就是关于jQuery实现表单验证提交的方法介绍，希望对需要的朋友有所帮助！

想要了解更多前端相关知识，可以关注PHP中文网jQuery视频教程、JavaScript视频教程、Bootstrap教程等等相关视频教程，欢迎大家参考学习！

Atas ialah kandungan terperinci jQuery表单验证提交：前台验证二（图文+视频）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn