jq表单提交加正则验证
验证方法:姓名,手机,邮箱这些,鼠标点击移走用input的失去焦点blur事件。若为空,给input下方加提示消息。



html:
input框是引用bootstrap的css
<div class="container-middle-form">
<!--<form class="form-horizontal container-middle-formcontent" role="form">-->
<div class="form-horizontal container-middle-formcontent">
<div class="form-group">
<div class="col-sm-12 form-Messageboard">
留言板
</div>
</div>
<div class="form-group">
<div class="col-sm-4">
<input type="text" name="name" class="form-control form-control-input" id="name" placeholder="姓名*">
<span class="form-group-name"></span> <!--提示文字-->
</div> <div class="col-sm-4">
<input type="text" name="phone" class="form-control form-control-input" id="tel" placeholder="电话*">
<span class="form-group-name"></span> </div> <div class="col-sm-4">
<input type="text" name="email" class="form-control form-control-input" id="email" placeholder="邮箱*"> <span class="form-group-name"></span> </div> </div> <div class="form-group "> <div class="col-sm-12"> <input type="text" name="title" class="form-control form-control-input" id="title" placeholder="标题*"> <span class="form-group-name"></span> </div> </div> <div class="form-group"> <div class="col-sm-12"> <textarea class="form-control" name="message-content" rows="4" id="content" placeholder="留言内容*"></textarea> <span class="form-group-name"></span> </div> </div> <div class="form-group form-group-btn"> <div class="col-sm-4 col-sm-4-btn"> <button id="send" class="btn btn-info btn-login">发送</button> </div> </div> </div> <!--</form>--> </div>
js:
var h = /^[\u4e00-\u9fa5]{0,}$/; //姓名
var d = /^1[3|4|5|8][0-9]\d{4,8}$/; //手机号
var y = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; //邮箱
var t = /^.{5,10}$/; //标题
//当 <input> 字段失去焦点时发生 blur 事件:
$("[name='name']").blur(function() {
var v = $(this).val();
if(v == '') {
//span提示文字
$("[name='name']").next().html("姓名不能为空!");
//字体为红色
$(this).prev().css("color", "#f00");
} else if(!v.match(h)) {
$("[name='name']").next().html("姓名不合法!");
$("[name='name']").prev().css("color", "#f00");
} else {
$(this).prev().css("color", "#0EA74A");
$("[name='name']").next().html("");
}
});
$("[name='phone']").blur(function() {
var v = $(this).val();
if(v == '') {
$("[name='phone']").next().html("手机号不能为空!");
$(this).prev().css("color", "#f00");
} else if(!v.match(d)) {
$("[name='phone']").next().html("手机号不正确!");
$("[name='phone']").prev().css("color", "#f00");
} else {
$(this).prev().css("color", "#0EA74A");
$("[name='phone']").next().html("");
}
});
$("[name='email']").blur(function() {
var v = $(this).val();
if(v == '') {
$("[name='email']").next().html("邮箱不能为空!");
$(this).prev().css("color", "#999");
} else if(!v.match(y)) {
$("[name='email']").next().html("请填写正确的邮箱!");
$("[name='email']").prev().css("color", "#f00");
} else {
$(this).prev().css("color", "#0EA74A");
$("[name='email']").next().html("");
}
});
$("[name='title']").blur(function() {
var v = $(this).val();
if(v == '') {
$("[name='title']").next().html("标题不能为空!");
$(this).prev().css("color", "#f00");
} else if(!v.match(t)) {
$("[name='title']").next().html("标题不在5-10之间!");
$("[name='name']").prev().css("color", "#f00");
} else {
$(this).prev().css("color", "#0EA74A");
$("[name='title']").next().html("");
}
});
$("[name='message-content']").blur(function() {
var v = $(this).val();
if(v == '') {
$("[name='message-content']").next().html("留言内容不能为空!");
$(this).prev().css("color", "#f00");
}
else {
$(this).prev().css("color", "#0EA74A");
$("[name='message-content']").next().html("");
}
});
//点击提交
$("#send").click(function(){
//为空弹出消息提示
var name=$("#name").val();
var phone=$("#tel").val();
var email=$("#email").val();
var title=$("#title").val();
var content=$("#content").val();
if(name ==""||phone ==""||email== ""||title =="" ||content==""){
alert("请填写信息");
return;
}
//提交后台
$.ajax({
type: "get",
async: false,
url: "/board/AddBoard.asp?name="+ $("#name").val()+ "&tel="+ $("#tel").val()+ "&email="+ $("#email").val()+ "&title="+ $("#title").val()+ "&content="+ $("#content").val(),
data: "",
jsonp: "callback",
success:function (json) {
json = JSON.parse(json)
if(json.code==200){
$("#name").val("");
$("#tel").val("");
$("#email").val("");
$("#title").val("");
$("#content").val("");
alert("提交成功")
}else{
alert("提交失败")
}
console.log(json);
}
});
});
jq表单提交加正则验证的更多相关文章
- MVC表单提交加JS验证
做一个普通表单提交,但是要加前端验证,如下: 1. Action public ActionResult Add(ProductModelproductID) { //operate... } ...
- jq表单验证
<body> <form method="post" action=""> <div class="int"& ...
- 自制“低奢内”CSS3注册表单,包含JS验证哦。请别嫌弃,好吗?。
要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到 ...
- 修改layui的表单手机、邮箱验证可以为空怎么实现?
修改layui的表单手机.邮箱验证可以为空 解决办法: 修改源码: 把表单验证源代码(form.js)的正则表达式改一下,例如手机的正则为:/^1d{10}$/,可以改成/^$|^1d{10} ...
- EasyUI中在表单提交之前进行验证
使用EasyUi我们可以在客户端表单提交之前进行验证,过程如下:只需在onSubmit的时候使用return $("#form1").form('validate')方法即可,E ...
- Ajax实现提交表单时验证码自动验证(原创自Zjmainstay)
本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...
- AngularJS 表单提交后显示验证信息与失焦后显示验证信息
虽然说AngularJS的实时表单验证非常有用,非常高效方便,但是当用户还没有完成输入时便弹出一个错误提示,这种体验是非常糟糕的. 正常的表单验证逻辑应该是在用户提交表单后或完成当前字段中的输入后,再 ...
- Form表单提交,js验证
Form表单提交,js验证 1, Onclick() 2, Onsubmit() Button标签 input (属性 submit button )标签 Input type=button ...
- Flask基础(16)-->WTForms表单创建和简单验证
Flask基础(16)-->WTForms表单创建和简单验证 前言:使用Flask_WTF需要配置参数SECRET_KEYCSRF_ENABLED是为了CSRF(跨站请求伪造)保护.SECRET ...
随机推荐
- 天启android5.1系统无法在非1650批次号的rk3288w芯片上启动
天启android5.1系统无法在非1650批次号的rk3288w芯片上启动 挂掉log,说明在rtc初始化后挂掉 [ ) HIGH! ======== [ [ [ 1.420258] [WLAN_R ...
- Tutorial2
一.写一个tf2的broadcaster 本教程关于怎样broadcast一个机器人的坐标系到tf2上. 1.创建一个learning_tf2包 catkin_create_pkg learning_ ...
- 使用eclipse创建Spring Boot项目
环境介绍 1.jdk1.8 2.eclipse 3.maven 3.5.0 创建项目 eclectic 左上角 file -> new -> maven project 出现下图默认就好, ...
- BZOJ-3143/洛谷3232 游走(HNOI2013)概率DP
题意:给定n个点m条边.每条边的权值还没决定,权值大小为从1到m.从1出发每次等概率选一条出边向下走,直到走到n点停止,路径代价就是边权总和.由你来决定边权来使得上诉路径代价期望值最小. 解法:点这么 ...
- 左上角小猫猫直达博主GitHub \-_-/
GitHub上有博主代码工程学习笔记啥的,由于推送比较方便所以有些学习笔记就没有上传到博客园
- [Luogu1938][USACO09NOV]找工就业Job Hunt
原题链接:https://www.luogu.org/problem/show?pid=1938 这一道题有一个比较难的点就是,这一张图上,是点上有权.既然点上有权的话,我们就不好一下子使用最短路了. ...
- [Luogu1821][USACO07FEB]银牛派对Silver Cow Party
由题意可知,我们需要求的是很多个点到同一个店的最短距离,然后再求同一个点到很多个点的最短距离. 对于后者我们很好解决,就是很经典的单源最短路径,跑一边dijkstra或者SPFA即可. 然而对于前者, ...
- 如何防御DNS陷阱?黑客常用3种DNS欺骗手法
DNS如何被利用?那么这个系统如何让用户变得脆弱?通常解析器会告诉每个DNS服务器你正在寻找哪个域名.此请求有时会包含您的完整IP地址.或者,如果不是您的完整IP地址,请求中通常会包含您的大部分IP地 ...
- webRTC脱坑笔记(一)— 初识webRTC
webRTC概述 WebRTC--- `Web browsers with Real-Time Communications (RTC)` WebRTC是一个开源项目,可以在`Web`和本机应用程序中 ...
- Linux网络栈
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11394930.html OSI模型 OSI 模型把网络互联的框架分为应用层.表示层.会话层.传输层.网 ...