验证方法:姓名,手机,邮箱这些,鼠标点击移走用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. lodash throttle和debounce

    https://lodash.com/docs#debounce throttle(又称节流)和debounce(又称防抖)其实都是函数调用频率的控制器 throttle:将一个函数的调用频率限制在一 ...

  2. Nginx配置参数详解参考示例

    user nobody; worker_processes 2; events{ worker_connections 1024; } http{ #设置默认类型为二进制流 default_type ...

  3. 微信小程序swiper组件实现图片宽度自适应

    wxml 代码: <!--pages/swipe/swipe.wxml--> <view> <swiper circular="true" indic ...

  4. MVC模式设计的Web层框架初识

    struts是个什么东西? struts是一个按MVC模式设计的Web层框架,其实它就是一个大大的servlet,这个Servlet名为ActionServlet,或是ActionServlet的子类 ...

  5. pycharm远程连接的步骤(有一项需特别注意)

    1.设置远程服务器,在这里配置服务器地址等: 要注意下边的这个mappings设置好,跟编译器的path mapping设置为同一个,这里我没设置为同一个,后边就出现了点问题. 2.配置远程的编译器 ...

  6. java资料搜索网站

    http://yun.java1234.com/ 盘多多 B站 一个集成了很多springboot功能的地址 https://gitbub.com/runzhenghengbin/SpringBoot ...

  7. I/O性能优化

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11525014.html Linux 系统的 I/O 栈图 I/O性能指标 根据指标找工具 根据工具查指 ...

  8. 使用IDEA进行commit合并(折叠)

    当前有,test1,test2两个commit,想把这两个分支合成一个commit去提交代码 将T1C修改的代码,与T2C修改的代码合并,合成一个commit作为提交 这样二个commit就合并成一个 ...

  9. Angular JS - 5 - Angular JS 模块和控制器

    1.引入 1.5版本的angularjs,直接打印angular对象: --> <!DOCTYPE html> <html> <head lang="en ...

  10. loadRunner函数之web_add_header

    web_add_header 功能:用于添加指定的报文头到下一次HTTP请求 格式:web_add_header( const char *Header, const char *Content ), ...