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 ...
随机推荐
- ROLLBACK - 退出当前事务
SYNOPSIS ROLLBACK [ WORK | TRANSACTION ] DESCRIPTION 描述 ROLLBACK 回卷当前事务并取消当前事务中的所有更新. PARAMETERS 参数 ...
- ES6 的基础教程
一.介绍 1.历史 ECMAScript和JavaScript ECMA是标准,JS是实现 类似于HTML5是标准,IE10.Chrome.FF都是实现 换句话说,将来也能有其他XXXScript来实 ...
- Python 循环列表删除元素的注意事项
错误示范: class Solution: def removeElement(self, nums, val: int) -> int: for i, num in enumerate(num ...
- Vue:列表渲染 v-for on a <template>
类似于 v-if,你也可以利用带有 v-for 的 <template> 渲染多个元素.比如: <html> <head> <title>Vue v-f ...
- elasticsearch failed to load elasticsearch nodes
转载:https://blog.csdn.net/weixin_44714808/article/details/90049315 elasticsearch 安装在linux时使用springboo ...
- ubuntu root用户 phpstorm软件不能使用中文输入法
一. 在 ~/.bashrc 里面加入 export GTK_IM_MODULE=fcitx export QT_IM_MODULE=fcitx export XMODIFIERS="@im ...
- Unparseable date: "Mon Aug 15 11:24:39 CST 2016",时间格式转换异常
String datestr= "Mon Aug 15 11:24:39 CST 2016";//Date的默认格式显示 Date date=new SimpleDateForma ...
- golang中最大协程数的限制(线程)
golang中最大协程数的限制 golang中有最大协程数的限制吗?如果有的话,是通过什么参数控制呢?还是通过每个协程占用的资源计算? 通过channel控制协程数的就忽略吧. 以我的理解,计算机资源 ...
- 【leetcode】1008. Construct Binary Search Tree from Preorder Traversal
题目如下: Return the root node of a binary search tree that matches the given preorder traversal. (Recal ...
- JMeter生成UUID方式
1. 使用JMeter工具中自带的函数__UUID 2. 使用Beanshell组件,在脚本中引入java.util.UUID,通过java来生成 import java.util.UUID; UUI ...