jQuery表单验证提交:前台验证二(图文+视频)

2022-05-22 0 687

本篇文章主要给大家详细介绍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实现表单验证提交的方法介绍,希望对需要的朋友有所帮助!

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

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

【声明:根据2013年1月30日《计算机软件保护条例》2次修订第17条规定: 为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存 储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬! 鉴于此,也希望大家按此说明研究软件!】
本站所有源码尽量保证原汁原味,如有特殊情况会作出声明及标注,网站资源不做任何二次加密(原版加密除外,不影响程序使用的不会做解密处理),方便您更好的学习参考。 在您的能力范围内,为了大环境的良性发展,请尽可能的选择正版资源。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

即刻码站__国内靠谱的站长资源下载平台 php教程 jQuery表单验证提交:前台验证二(图文+视频) https://www.jike1995.com/37394.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度
查看详情

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务