<!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. Java生产环境下性能监控与调优详解视频教程 百度云 网盘

    集数合计:9章Java视频教程详情描述:A0193<Java生产环境下性能监控与调优详解视频教程>软件开发只是第一步,上线后的性能监控与调优才是更为重要的一步本课程将为你讲解如何在生产环境 ...

  2. 在vue cli3.0 里面下载less，下载成功了还是提示没有 需要下载

    今天正好新建了一个项目,在用less的时候就各种花样报错提示我: Failed to resolve loader: less-loaderYou may need to install it.Err ...

  3. 利用MD5进行加密

    package com.cn.peitest; import java.io.UnsupportedEncodingException; import java.security.MessageDig ...

  4. Java学习日报7.27

    笔记

  5. Java学习日报7.22

    //3.2   逆向输出三位整数!    7.22 package 三个和尚比身高1; import java.util.Scanner; public class Demo1{ @SuppressW ...

  6. java线程，进程，多线程

    (1)线程和进程 通俗一点,进程就是一个应用程序在处理机上的一次执行过程,它是一个动态的概念,而线程是进程中的一部分,进程包含多个线程在运行. (2)java中实现线程的两种方式,第一种是继承Thre ...

  7. sql删除重复数据思路

    总的思路就是先找出表中重复数据中的一条数据,插入临时表中,删除所有的重复数据,然后再将临时表中的数据插入表中.所以重点是如何找出重复数据中的一条数据,有三种情况 1.重复数据完全一样,使用distin ...

  8. [ABP教程]第七章 作者:数据库集成

    Web开发教程7 作者:数据库集成 关于此教程 在这个教程系列中,你将要构建一个基于ABP框架的应用程序 Acme.BookStore.这个应用程序被用于甘丽图书页面机器作者.它将用以下开发技术: E ...

  9. spring boot 邮件服务

    引入依赖 添加spring-boot-starter-mail包引用 <dependency> <groupId>org.springframework.boot</gr ...

  10. 记录一次spring与jdk版本不兼容的报错

    由于公司项目是普通的web工程,没有用上maven,所以笔者在jdk1.8版本下运行项目报了这样的错误 [ERROR]: 2020-03-09 09:38:50 [org.springframewor ...