jQuery 留言表单验证
<!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 留言表单验证的更多相关文章
- ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- jQuery formValidator表单验证插件
什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...
- [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- Jquery Validate 表单验证的多种方式
ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...
- 【锋利的jQuery】表单验证插件踩坑
和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...
- jquery实现表单验证简单实例
/* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将 ...
- jQuery的表单验证
jQuery的表单验证 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-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 ...
- （转）jQuery Validate 表单验证
在做网页表单时时常需要在客户端对表单填写的数据进行验证一番才能提交,我们可以通过自己编写JavasScript代码来验证,但是有时数据量过多时就会有些难度了.基于jQuery的jquery.valid ...
随机推荐
- python爬虫爬取安居客并进行简单数据分析
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 爬取过程一.指定爬取数据二.设置请求头防止反爬三.分析页面并且与网页源码进行比对四.分析页面整理数据 ...
- 真香！Python十大常用文件操作，轻松办公
日常对于批量处理文件的需求非常多,用Python写脚本可以非常方便地实现,但在这过程中难免会和文件打交道,第一次做会有很多文件的操作无从下手,只能找度娘. 本篇文章整理了10个Python中最常用到的 ...
- 最速下降法--MATLAB程序
function x = fxsteep(f,e,a,b)x1 = a;x2 = b;Q = fxhesson(f,x1,x2);x0 = [x1,x2]';temp = [x0];fx1 = dif ...
- Js 添加cookie，写入cookie到主域
if (getCookie("content") != null && getCookie("content") != "" ...
- 检验实时3D像素流送平台好坏的七个标准！（上）
将交互式3D像素流送技术作为有价值的企业工具之后,就该寻找像素流送服务供应商了.问题在于交互式3D像素流送是一种新兴技术,因此很难知道要问供应商的正确问题.在开始使用之前,这里有7个问题,您应该从候选 ...
- （八）、rm--删除文件或者目录
一.命令的描述与格式 永久地删除文件或者目录,此命令具有破坏性,一旦删除,没有备份,无法恢复 格式:rm [选项] 文件或者目录 -d或者--directory ...
- [leetcode]720. Longest Word in Dictionary字典中最长的单词
b.compareTo(a) 这个函数是比较两个值得大小,如果b比a大,那么返回1 如果小,那么返回-1,相等返回0 如果比较的是字符串,那么比较字典编纂顺序,b靠前返回-1,靠后返回1 这个题的核心 ...
- JavaSwing 船只停靠管理可视化（四）
JavaSwing 船只停靠管理可视化(一) JavaSwing 船只停靠管理可视化(二) JavaSwing 船只停靠管理可视化(三) JavaSwing 船只停靠管理可视化(四) JavaSwin ...
- 这是一篇SQL注入文章
目录 注入原理: 1.寻找注入点的方式或注入的地方可能包括. 2.注入点判断方法. 3.注入分类. 数字型: 字符型: 搜索型: XX型(也叫其他型): 4.注入提交方式. 5.注入攻击类型与方式. ...
- 使用IDEA构建Spring Boot项目简单实例
一.介绍 它的目标是简化Spring应用和服务的创建.开发与部署,简化了配置文件,使用嵌入式web服务器,含有诸多开箱即用的微服务功能,可以和spring cloud联合部署. Spring Boot ...