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来说 基本上循环用的两个 wile 跟静态语言相似 下来是for循环 这个就跟静态语言大大不同了 wile 条件:–>while 循环也就是 当条件为真的时候会一直循环 ...
- 【实时渲染】实时3D渲染如何加速汽车线上体验应用推广
在过去,一支优秀的广告片足以让消费者对一辆汽车产生兴趣.完美的底盘线条或引擎的轰鸣声便会让潜在买家跑到经销商那里试驾.现在,广告还是和往常一样,并没有失去其特性,但86%的买家在与销售交流之前会在网上 ...
- CentOs8安装redis与Linux安装GDI+图形
1.安装 yum install redis 2.编辑配置文件 vim /etc/redis.conf #requirepass那行并打开注释,在后面写自己的密码,如下 requirepass you ...
- （十二）、file--判断文件类型命令
一.命令描述与格式 描述:linux在查看一个文件前,要首先确定该文件中数据的类型,之后再使用适当的命令或者方法打开该文件,在linux中文件的扩展名并不代表文件的类型,也就是说扩展名与文件的类型没有 ...
- CSS中margin：auto什么意思？margin：auto属性的用法详解
我们都知道使用margin:auto可以让元素水平居中的.但你有没有想过使用margin:auto可以让元素水平居中的原因,要回答这个问题,我们首先需要看一下margin:auto的工作原理.auto ...
- Kali实现靶机远程控制
任务一.使用netcat建立监听并连接 1. 在ubuntu开启本地监听,在kali中连接 2. 在kali中开启监听,在ubuntu中反弹连接 任务二.使用met ...
- 知乎上看到的一篇讲解Epoll的文章，较形象生动
作者:蓝形参链接:https://www.zhihu.com/question/20122137/answer/14049112来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- Spring—SSJ集成&声明式事务管理
1. 课程介绍 1. SSJ集成;(掌握) 2. 声明式事务管理;(掌握) 什么是三大框架 2.1. ssh Struts/Struts2 Spring Hibernate 2.2. ss ...
- TurtleBot3 Waffle （tx2版华夫）（13）RC100遥控杆控制
13.1．遥控器说明 使用ROBOTIS RC100的设置已经在ROS的OpenCR固件中,因此不需要安装必需软件包, 安装号即可使用. 13.2．遥控器的安装 1接线口穿过后壳的过孔. 2接线口连接 ...
- Java异常体系概述
Java的异常体系结构 Java异常体系的根类是 Throwable, 所以当写在java代码中写throw抛出异常时,后面跟的对象必然是Throwable或其子类的对象. 其中Exception异常 ...