<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/bootstrap4.5.min.css" />

        <style type="text/css">

            #cooperation {

                padding: 80px 0;

            }

            .Commtitle .title_t {

                text-align: center;

                margin-bottom: 50px;

                font-size: 16px;

            }

            #cooperation .cooperation-text {

                /* background-color: darkmagenta; */

                display: flex;

                flex-direction: column;

                align-items: center;

            }

            #cooperation .cooperation-text div {

                width: 600px;

                margin-bottom: 20px;

            }

            .cooperation-text .form-control {

                box-shadow: none;

                border: 1px solid #ececec;

            }

            #cooperation .cooperation-text input,

            #cooperation .cooperation-text textarea {

                width: 100%;

                height: 60px;

                background: #f2f2f2;

                padding: 15px 20px;

                font-size: 16px;

                outline: none;

                box-shadow: none;

            }

        </style>

        <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            $(function() {

                //留言

                $("#commit").click(function() {

                    //判断校验

                    if(!validMessage()) {

                        return;

                    }

                    userInfo();

                })

                //服务留言焦点事件

                $("#cooperation input,#cooperation textarea").focus(function() {

                    $(this).attr("placeholder", "");

                });

                $("#cooperation input").eq(0).blur(function() {

                    $(this).attr("placeholder", "请输入您的姓名");

                });

                $("#cooperation input").eq(1).blur(function() {

                    $(this).attr("placeholder", "请输入您的手机号码");

                });

                $("#cooperation textarea").blur(function() {

                    $(this).attr("placeholder", "请输入留言内容");

                })

            })

            //留言功能

            function userInfo() {

                //    console.log("执行了1")

                let postdata = {

                    visitor_name: $.trim($("#visitor_name").val()),

                    visitor_phone: $.trim($("#visitor_phone").val()),

                    content: $.trim($("#content").val())

                }

                $.ajax({

                    type: "post",

                    url: "https://baidu.com:8084/addLeaveWord",

                    data: postdata,

                    /*传给后端的数据格式json*/

                    dataType: "json",

                    success: function(data) {

                        console.log(data);

                        if(data.success) {

                            console.log(data.msg);

                            $(".textInput").val("");

                            return;

                        } else {

                            console.log(data.msg);

                            $(".textInput").val("");

                            return;

                        }

                    },

                    error: function(err) {

                        console.log("服务器连接异常,请重试!");

                        $(".textInput").val("");

                    }

                });

            }

            //留言信息校验

            function validMessage() {

                //    console.log("执行了2")

                var flag = true;

                //姓名

                var name = $.trim($("#visitor_name").val());

                var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");

                if(name == "") {

                    $('#visitor_name').parent().addClass("has-error");

                    $('#visitor_name').next().text("姓名为空");

                    $("#visitor_name").next().show();

                    flag = false;

                    //  }else if(!reg.test(name)){ //只限制中文名

                    //        $('#visitor_name').parent().addClass("has-error");

                    //      $('#visitor_name').next().text("姓名必须为中文");

                    //      $("#visitor_name").next().show();

                    //      flag = false;

                } else if(name.length < 2) {

                    $('#visitor_name').parent().addClass("has-error");

                    $('#visitor_name').next().text("姓名必须2个以上");

                    $("#visitor_name").next().show();

                    flag = false;

                } else {

                    $('#visitor_name').parent().removeClass("has-error");

                    $('#visitor_name').next().text("");

                    $("#visitor_name").next().hide();

                }

                //手机号码

                var phone = $.trim($("#visitor_phone").val());

                if(phone == "") {

                    $('#visitor_phone').parent().addClass("has-error");

                    $('#visitor_phone').next().text("手机号码为空");

                    $("#visitor_phone").next().show();

                    flag = false;

                } else if(!(/^1[34578]\d{9}$/.test(phone))) {

                    //        电话号码格式的校验

                    $('#visitor_phone').parent().addClass("has-error");

                    $('#visitor_phone').next().text("手机号码有误");

                    $("#visitor_phone").next().show();

                    flag = false;

                } else {

                    $('#visitor_phone').parent().removeClass("has-error");

                    $('#visitor_phone').next().text("");

                    $("#visitor_phone").next().hide();

                }

                //留言内容

                var content = $.trim($("#content").val());

                if(content == "") {

                    $('#content').parent().addClass("has-error");

                    $('#content').next().text("留言内容为空");

                    $("#content").next().show();

                    flag = false;

                } else {

                    $('#content').parent().removeClass("has-error");

                    $('#content').next().text("");

                    $("#content").next().hide();

                }

                return flag;

            }

        </script>

    </head>

    <body>

        <!--商务合作-->

        <section id="cooperation" class="Commtitle">

            <div class="title_t userCase-title">

                <p class="titleEng wow bounceInLeft">service message</p>

                <p class="titleCont wow bounceInRight">服务留言</p>

                <h4 class="" style="margin: 50px 0 0 0;font-size: 16px;font-weight: 600;">

                          如果您对我们的产品感兴趣，欢迎留言，会有工作人员与您联系

                  </h4>

            </div>

            <div class="container">

                <div class="row">

                    <div class="cooperation-text">

                        <div class="wow bounceInUp" data-wow-delay="0.1s">

                            <input type="text" class="form-control textInput" id="visitor_name" placeholder="请输入您的姓名">

                            <label class="control-label" for="name" style="display: none;"></label>

                        </div>

                        <div class="wow bounceInUp" data-wow-delay="0.2s">

                            <input type="number" class="form-control textInput" id="visitor_phone" placeholder="请输入您的手机号码">

                            <label class="control-label" for="phone" style="display: none;"></label>

                        </div>

                        <div class="wow bounceInUp" data-wow-delay="0.3s">

                            <textarea class="form-control textInput" rows="3" id="content" maxlength="600" placeholder="请输入留言内容"></textarea>

                            <label class="control-label" for="content" style="display: none;"></label>

                            <!--<p id="txtNum">0</p>-->

                        </div>

                        <div class="wow bounceInUp" data-wow-delay="0.4s">

                            <button type="btn button primary" id="commit">提交</button>

                        </div>

                    </div>

                </div>

            </div>

        </section>

    </body>

</html>

效果预览：

jQuery 留言表单验证的更多相关文章

  1. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  2. jQuery formValidator表单验证插件

    什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...

  3. [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  4. Jquery Validate 表单验证的多种方式

    ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...

  5. 【锋利的jQuery】表单验证插件踩坑

    和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...

  6. jquery实现表单验证简单实例

    /* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将 ...

  7. jQuery的表单验证

    jQuery的表单验证 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  8. Jquery 实现表单验证，所有验证通过方可提交

    1. [代码]Jquery 实现表单验证,所有验证通过方可提交 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...

  9. （转）jQuery Validate 表单验证

    在做网页表单时时常需要在客户端对表单填写的数据进行验证一番才能提交,我们可以通过自己编写JavasScript代码来验证,但是有时数据量过多时就会有些难度了.基于jQuery的jquery.valid ...

随机推荐

  1. JavaScript之作用域-作用域链

    作用域 ==> 作用域链   作用域:变量可以其作用的区域(声明定义好一个变量,变量可以在哪些范围内使用) 分类:全局作用域和局部作用域(函数作用域):在js中,目前全局有作用域以及函数可以形成 ...

  2. 如何做好Code Review

    Code Review(代码审查)很多团队都会做,效果如何不好说.如果你能轻易地从一堆出自正经团队之手的代码里找出几个低级错误,往往意味着团队管理者长期忽视了Code Review的重要性. 根据经验 ...

  3. JAVA基础之接口

    接口 学习完框架之后,整合SSM过程中对于接口的认识加深了许多.根据<java核心技术>这本书进一步研究了一下. 1.概念 java核心技术是这样说的:"在Java程序设计中,接 ...

  4. java Swing组件随着窗口拖动等比移动或等比放大

    实现原理很简单, 1清空布局(使用绝对布局) 2添加监听器(监听窗口是否被拖动) 3在监听器里面动态调整 组件的位置 效果如下: 拖动之后效果: 代码实现: import java.awt.Event ...

  5. JDBC访问数据库的基本步骤是什么？

    1.加载(注册)数据库驱动(到JVM) 2.建立(获取)数据库连接. 3.创建(获取)数据库操作对象. 4.定义操作的SQL语句. 5.执行数据库操作. 6.获取并操作结果集. 7.关闭对象,回收数据 ...

  6. ubuntu虚拟机启用双网卡IP配置

    首先要登入自己的虚拟机,这里以ubuntu为例. 配置两块网卡,一块eth0为NAT模式,另一块为eth1仅主机模式 # 进入网卡配置页面vi /etc/network/interfaces # Th ...

  7. java位运算符生产环境应用分析

    在实际应用场景中 特别是 1,2,4,8,16 这种2的整数次幂的数字,因为具有非常典型的特点 首先是 1.2.4 这几位数了,因为他们的特点就是二进制只有一个为 1 的位,其他位都是 0,并同其他数 ...

  8. 每日一个linux命令6 -- rmdir

    rmdir doc 如果doc为空目录则删除,否则无法删除. rmdir -p test2/test3 递归删除空目录,首先判断test3,如果test3为空,则删除test3,此时判断test2,如 ...

  9. 手撕redis分布式锁，隔壁张小帅都看懂了！

    前言 上一篇老猫和小伙伴们分享了为什么要使用分布式锁以及分布式锁的实现思路原理,目前我们主要采用第三方的组件作为分布式锁的工具.上一篇运用了Mysql中的select ...for update实现了 ...

  10. Tensorflow创建已知分布的张量

    一.随机数 tf.random(num) 随机产生返回0----num-1的数 二.图变量 tf.Variable.init(initial_value, trainable=True, collec ...