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 1-8】Python手把手教程之——管理列表List
遍历列表 在日常开发中,我们经常需要遍历列表的所有元素,对每个元素执行相同的操作.例如,在管理商场的蔬菜时候,需要给所有的蔬菜商品都打7折,并重新生成价格.当我们需要对列表中的每个元素都执行相同的操作 ...
- Office__自动保存和恢复
#1.前言 在您埋头辛苦编辑Excel.Word或PPT文档的时候,如果突然发生断电.系统崩溃.意外误操作,本文将以Excel2010为例详细阐述其中自动保存功能的工作机理和恢复文件的访问方法,Exc ...
- C++STL教程
1 什么是STL? STL(Standard Template Library),即标准模板库,是一个具有工业强度的,高效的C++程序库.它被容纳于C++标准程序库(C++ Standard Libr ...
- 5.自定义view-评分控件RatingBar
1.效果 2.实现原理 1.根据分数分别画选中的星星.正常的星星 2.onTouchEvent 中获取点击.滑动的位置,修改分数,在通过invalidate() 去重新绘制 核心代码: @Overri ...
- 技术基础 | 用JSON在抖音上发布动态——使用Stargate即可轻松实现
Cassandra是世界上经受住最多实战考验的数据库,通过其快速且易于使用的数据API,让你的程序开发升级. 本文将介绍什么是Stargate以及Stargate的最新进展,如果您想快速浏览相关代码和 ...
- spring-boot 使用hibernate validation对参数进行优雅的校验
springboot天生支持使用hibernate validation对参数的优雅校验,如果不使用它,只能对参数挨个进行如下方式的手工校验,不仅难看,使用起来还很不方便: if(StringUtil ...
- hive中笛卡尔积的优化
由于一个业务,必须要进行笛卡尔积,但是速度太慢了,left join时左表大概4万条数据,右表大概 3000多条数据,这样大概就是一亿多条数据, 这在大数据领域其实不算很大的数据量,但是hive中跑的 ...
- 152. Maximum Product Subarray动态规划连乘最大子串
Find the contiguous subarray within an array (containing at least one number)which has the largest p ...
- Liunx运维(九)-Liunx进程管理命令
文档目录: 一.ps:查看进程 二.pstree:查看进程状态树 三.pgrep:查找匹配条件的进程 四.kill:终止进程 五.killall:通过进程名终止进程 六.pkill:通过进程名种植进程 ...
- Linux系统性能排查
一.性能监控Sar命令 语法格式: [root@cdh init.d]# sar -h -A:所有报告的总和 -b:显示I/O和传递速率的统计信息 -B:显示换页状态 -d:输出每一块磁盘的使用信息 ...