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程序员是表白的
一.️爱心墙️ 通过爬虫搜集到粉丝的头像,然后利用PIL库拼接出爱心墙的形状: 二.代码分析 1.头像爬取 在个人中心点击我的粉丝便可以看到自己的粉丝,通过抓包可知对应的接口为: url = 'htt ...
- python列表（九）元组
元组 元组是不可变序列,元组一旦创建,用任何方法都不可以修改其元素. 元组的偶有元素是放在一对圆括号"()"中 1.元组创建与删除 使用"="讲一个元组赋值给变 ...
- js对flv提取h264、aac音视频流
FLV提取里面的h264视频流 FLV和MP4支持的编码 流媒体和媒体文件的区别 流媒体是指将一连串的多媒体资料压缩后,经过互联网分段发送资料,在互联网上即时传输影音以供观赏的一种技术与过程,此技术使 ...
- SQLServer多事务——事务嵌套
在ERP中,偶尔会有存储过程里面继续调用存储过程的情况 其中更有一些特殊的存储过程分别都使用了存储过程,大致可以分为下面几种情况: 1.平行事务,在多个事务中,任意一个成功则提交数据库,失败则各自RO ...
- 诡异的NPE--三目运算自动类型转换
今天在项目中碰到一个诡异的空指针异常的问题,刚开始很不解,明明自己做了空判断,为什么还是出现了空指针呢? 最后排查出来的原因是:三目运算符的自动类型匹配机制. 现场 java.lang.NullPoi ...
- 什么情况下调用doGet()和doPost()?
默认情况是调用doGet()方法,JSP页面中的Form表单的method属性设置为post的时候,调用的为doPost()方法: 为get的时候,调用deGet()方法.
- 表单综合HTML
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 每日一个linux命令3
Linux 中用pwd命令来查看"当前工作目录"的完整路径. 简单的说,每当你在终端进行操作时,你都会有一个当前工作目录,在不太确定当前位置时,就会使用pwd来判定当前目录在文件系 ...
- tep0.6.0更新聊聊pytest变量接口用例3个级别复用
tep是一款测试工具,在pytest测试框架基础上集成了第三方包,提供项目脚手架,帮助以写Python代码方式,快速实现自动化项目落地.fixture是pytest核心技术,本文聊聊如何使用fixtu ...
- 常用 .gitignore 模板
前言 每次建项目的时候可以直接复制了,也算是方便自己,以后发现少的会更新 正文 作用 git提交时忽略文件 文件名 .gitignore Python # Byte-compiled / optimi ...