验证方法:姓名,手机,邮箱这些,鼠标点击移走用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表单提交加正则验证的更多相关文章

  1. MVC表单提交加JS验证

    做一个普通表单提交,但是要加前端验证,如下: 1. Action public ActionResult Add(ProductModelproductID) {     //operate... } ...

  2. jq表单验证

    <body> <form method="post" action=""> <div class="int"& ...

  3. 自制“低奢内”CSS3注册表单,包含JS验证哦。请别嫌弃,好吗?。

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到 ...

  4. 修改layui的表单手机、邮箱验证可以为空怎么实现?

      修改layui的表单手机.邮箱验证可以为空   解决办法: 修改源码: 把表单验证源代码(form.js)的正则表达式改一下,例如手机的正则为:/^1d{10}$/,可以改成/^$|^1d{10} ...

  5. EasyUI中在表单提交之前进行验证

    使用EasyUi我们可以在客户端表单提交之前进行验证,过程如下:只需在onSubmit的时候使用return  $("#form1").form('validate')方法即可,E ...

  6. Ajax实现提交表单时验证码自动验证(原创自Zjmainstay)

    本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...

  7. AngularJS 表单提交后显示验证信息与失焦后显示验证信息

    虽然说AngularJS的实时表单验证非常有用,非常高效方便,但是当用户还没有完成输入时便弹出一个错误提示,这种体验是非常糟糕的. 正常的表单验证逻辑应该是在用户提交表单后或完成当前字段中的输入后,再 ...

  8. Form表单提交,js验证

    Form表单提交,js验证 1,  Onclick() 2, Onsubmit() Button标签 input (属性 submit  button )标签 Input type=button    ...

  9. Flask基础(16)-->WTForms表单创建和简单验证

    Flask基础(16)-->WTForms表单创建和简单验证 前言:使用Flask_WTF需要配置参数SECRET_KEYCSRF_ENABLED是为了CSRF(跨站请求伪造)保护.SECRET ...

随机推荐

  1. macos Item2 添加 Shell Integration (ftp传输)

    macos系统 的item2软件 的  Shell Integration (ftp传输)  功能强大,无需 安装其他ftp软件,也是为了保证 密码安全 在使用时报错如下(因为本地 ping不通): ...

  2. 基于TMS320C6455、XC5VSX95T 的6U CPCI无线通信处理平台

    基于TMS320C6455.XC5VSX95T 的6U CPCI无线通信处理平台   1. 板卡概述 本板卡由我公司自主研发,基于CPCI架构,符合PICMG2.0 D3.0标准,包含双TI TMS3 ...

  3. 二、RabbitMQ操作

    1.RabbitMQ发送与接收. 2.RabbitMQ发送与接收. 3.RabbitMQ发送与接收.

  4. HDU4089/Uva1498 Activation 概率DP(好题)

    题意:Tomato要在服务器上激活一个游戏,一开始服务器序列中有N个人,他排在第M位,每次服务器会对序列中第一位的玩家进行激活,有四种结果: 1.有p1的概率会激活失败,这时候序列的状态是不变的.2. ...

  5. IDA Pro - 如何得到比较清楚的逆向伪代码

    原文地址:Question about disassembler 简介 这篇文章介绍了如何在不使用插件的IDA Hex-Rays如何得到比较清晰的伪代码.IDA Hex-Rays功能很强大,只要你提供 ...

  6. 第三节 基本数据写入 --------增加&查询

    启动mongodb服务 net start mongodb 链接mongodb  进入bin目录 mongo 127.0.0.1:12345 启动连接 show dbs   显示所有的数据库 use ...

  7. BZOJ4269 再见xor

    考前挣扎 线性基裸题 mx直接求 次大直接从低到高枚举第一个非0位 然后次大就是异或上就行了[显然贪心呐qwq 不到800b可还行 //Love and Freedom. #include<cs ...

  8. 插入排序->希尔排序

    /** * 插入排序 */ public class InsertSort { public static void main(String[] args){ int[] arr = {5,5,2,6 ...

  9. HAProxy基于Centos6.5安装及配置

    一.使用2.6内核Linux,配置sysctl参数 vi /etc/sysctl.conf #haproxy confignet.ipv4.tcp_tw_reuse = 1net.ipv4.ip_lo ...

  10. VM安装OSX进度条一半时卡住不动,【附】OSX10.10 ISO镜像文件

    安装OSX10.10真是一波多折,先是下载了一个5G多的原版dmg文件,转成ISO后在虚拟机上无法识别,后按网上的说的方法​​​​在提取出来的BaseSystem.dmg文件,再转成ISO文件,​可以 ...