hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 杂谈 - 正文 君子好学,自强不息!

【杂谈】jQuery表单考证提交:前台考证二(图文+视频)

2019-11-18杂谈搜奇网34°c
A+ A-
本篇文章重要给人人细致引见 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='javascript' src="js/jq22.js"></script>
</head>
<body>
<div class='body_main'>

    <div class='index_box' style='margin-top:20px;'>
        <div style="position:fixed;color:red;margin:70px 0 0 450px;font-size:16px;Z-index:100;display:block;"
             id="hint"></div>
        <div class='box_title'>
            <div class='text_content'>
                <h1>jQuery用户注册表单考证代码</h1>
            </div>
        </div>
        <div class='box_main'>
            <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('mobile');">
                </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('email');">
                </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='div_submit_button'>
                            <input id="submit" type="submit" value="注册" class='button_button disabled'>
                        </div>
                    </div>
                </form>
            </div>
            <script type="text/javascript">
                function __changeUserName(of) {
                    var username = $('#' + of).val();
                    if (of == 'email') {
                        if (username.search(/^[\w\.+-]+@[\w\.+-]+$/) == -1) {
                            showTooltips('email_input', '请输入准确的Email地点');
                            return;
                        }
                    }
                    else {
                        if (username == '' || !isMobilePhone(username)) {
                            showTooltips('mobile_input', '请输入准确的手机号码');
                            return;
                        }
                    }
                }

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

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

                function check() {
                    hideAllTooltips();
                    var ckh_result = true;
                    // if ($('#email').val() == '' || !isEmail($('#email').val())) {
                    //     showTooltips('email_input', '请输入准确的Email地点');
                    //     ckh_result = false;
                    // }
                    if ($('#password1').val() == '') {
                        showTooltips('password1_input', '暗码不能为空');
                        ckh_result = false;
                    }
                    if ($('#password2').val() == '') {
                        showTooltips('password2_input', '确认暗码不能为空');
                        ckh_result = false;
                    }
                    if ($('#password2').val() != $('#password1').val()) {
                        showTooltips('password2_input', '两次暗码不一致');
                        ckh_result = false;
                    }
                    if ($('#mobile').val() == '' || !isMobilePhone($('#mobile').val())) {
                        showTooltips('mobile_input', '手机号码不准确');
                        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='box_bottom'></div>
    </div>
</div>

</body>
</html>

上述代码中,我们简朴的写了一个form表单,将前台数据提交到check1.php,提交体式格局为post,而且给form表单一个点击事宜。

当我们点击提交的时刻,就会举行一系列信息推断。而当我们没有点击注册也就是没有触发点击事宜的话,也会有推断。

如代码中的__changeUserName要领,在此要领中,我们起首经由过程正则表达式推断邮箱花样是不是准确,手机号码是不是准确。以及在checkPwd1和checkPwd2要领中,推断暗码是不是符合要求,是不是与第一次暗码雷同。这些要领都是在没有点击注册按钮时发作的考证。

当然有这些推断也是不够的,所以我们须要写一个点击注册时会发作的考证,如上代码中的check要领,个中我们将每一个字段都举行了推断(背景须要的字段都须要举行考证)。

除了上述中点击注册的考证要领外,我们也能够给点击注册的按钮绑定一个事宜来推断考证。这里就不逐一赘述了。

个中涉及到的js和css代码,在上一篇文章【jQuery表单考证提交:前台考证一】中都有,须要的朋侪能够前往参考。

本篇文章就是关于jQuery完成表单考证提交的要领引见,愿望对须要的朋侪有所协助!

想要相识更多前端相干学问,能够关注Ki4网jQuery视频教程 、JavaScript视频教程、Bootstrap教程等等相干视频教程,迎接人人参考进修!

以上就是jQuery表单考证提交:前台考证二(图文+视频)的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
【杂谈】jQuery表单考证提交:前台考证二(图文+视频)

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

本文来源:搜奇网

本文地址:https://www.sou7.cn/281905.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>