PHP提交表单信息即时提醒,jquery表单提交错误信息提示功能实现

最新推荐文章于 2022-09-14 17:23:24 发布
最新推荐文章于 2022-09-14 17:23:24 发布
阅读量227 收藏
点赞数
文章标签： PHP提交表单信息即时提醒

本文主要介绍了jquery表单提交带错误信息提示效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧，希望能帮助大家更好的完成jQuery表单功能。

效果图：

e68b180b915c6af8721a72ab1ff7eb49.png

f8dee03298c800d009ab35852743c34c.png

html代码：

我是

投资者

地产开发商

注册错误信息

注册错误信息

注册错误信息

注册错误信息

国家或地区

中国

美国

注册错误信息

州/省

广东

加州

注册错误信息

注册错误信息

注册错误信息

下一步

css代码：

.m_t10 {

margin-top: 20px;

}

.error_p2 {

background-color: #FF6900;

color: white;

font-size: 10px;

padding: 5px;

border-radius: 5px;

display: none;

}

.error_p2 i {

margin-right: 5px;

}

js代码

//定义要提交的所有数据为一个数组validate2，并且全部赋值为false

var validate2 = {

identity: false,

name: false,

phone: false,

email: false,

country: false,

province: false,

mail: false,

pwd: false,

pwd2: false

};

var msg = ""; //定义提示信息

//判断角色

$('select[name=identity]', form2).blur(function() {

var identity = $(this).val();

var span = $(this).parents('.error_p2').find('.error_p2');

//判断用户名是否为空

if(identity == '') {

msg = '' + "请输入您的身份";

span.html(msg);

span.css('display', 'inline');

validate2.identity = false;

return;

} else {

msg = "";

span.css('display', 'none');

validate2.identity = true;

return;

}

})

// //判断用户名

$('input[name=name]', form2).blur(function() {

var name = $(this).val();

var span = $(this).parents('.error_p2').find('.error_p2');

//判断用户名是否为空

if(name == '') {

msg = '' + "请输入用户名";

span.html(msg);

span.css('display', 'inline');

validate2.name = false;

return;

} else {

msg = "";

span.css('display', 'none');

validate2.name = true;

return;

}

})

//判断手机

$('input[name=phone]', form2).blur(function() {

var phone = $(this).val();

var span = $(this).parents('.error_p2').find('.error_p2');

//判断用户名是否为空

if(phone == '') {

msg = '' + "请输入手机号";

span.html(msg);

span.css('display', 'inline');

validate2.phone = false;

return;

} else {

msg = "";

span.css('display', 'none');

validate2.phone = true;

return;

}

})

//判断国家

$('select[name=country]', form2).blur(function() {

var country = $(this).val();

var span = $(this).parents('.error_p2').find('.error_p2');

//判断用户名是否为空

if(country == '') {

msg = '' + "请输入国家";

span.html(msg);

span.css('display', 'inline');

validate2.country = false;

return;

} else {

msg = "";

span.css('display', 'none');

validate2.country = true;

return;

}

})

//判断省份

$('select[name=province]', form2).blur(function() {

var province = $(this).val();

var span = $(this).parents('.error_p2').find('.error_p2');

//判断用户名是否为空

if(province == '') {

msg = '' + "请输入省或州";

span.html(msg);

span.css('display', 'inline');

validate2.province = false;

return;

} else {

msg = "";

span.css('display', 'none');

validate2.province = true;

return;

}

})

//判断邮政编码

$('input[name=mail]', form2).blur(function() {

var mail = $(this).val();

var span = $(this).parents('.error_p2').find('.error_p2');

//判断用户名是否为空

if(mail == '') {

msg = '' + "请输邮政编码";

span.html(msg);

span.css('display', 'inline');

validate2.mail = false;

return;

} else {

msg = "";

span.css('display', 'none');

validate2.mail = true;

return;

}

})

//判断email

$('input[name=email]', form2).blur(function() {

var email = $(this).val();

var reg = /\w+[@]{1}\w+[.]\w+/;

var span = $(this).parents('.error_p2').find('.error_p2');

if(email == '') {

msg = '' + "请填写邮箱";

span.html(msg);

span.css('display', 'inline');

validate2.eamil = false;

return;

} else if(reg.test(email) == false) {

msg = '' + "邮箱格式不正确";

span.html(msg);

span.css('display', 'inline');

validate2.email = false;

return;

} else {

msg = "";

span.css('display', 'none');

validate2.email = true;

return;

}

})

//判断密码

$('input[name=pwd]', form2).blur(function() {

var pwd = $(this).val();

var span = $(this).parents('.error_p2').find('.error_p2');

//判断用户名是否为空

if(pwd == '') {

msg = '' + "密码不能为空";

span.html(msg);

span.css('display', 'inline');

validate2.pwd = false;

return;

} else {

msg = "";

span.css('display', 'none');

validate2.pwd = true;

return;

}

})

//判断再次确认密码

$('input[name=pwd2]', form2).blur(function() {

var pwd2 = $(this).val();

var span = $(this).parents('.error_p2').find('.error_p2');

//判断用户名是否为空

if(pwd2 == '') {

msg = '' + "确认密码不能为空";

span.html(msg);

span.css('display', 'inline');

validate2.pwd2 = false;

return;

} else if(pwd2 != $('input[name=pwd]', form2).val()) {

msg = '' + "确认密码与密码不一致";

span.html(msg);

span.css('display', 'inline');

validate2.pwd2 = false;

return;

} else {

msg = "";

span.css('display', 'none');

validate2.pwd2 = true;

return;

}

})

//提交表单，isOK的值是所有提交信息的true，false判断，

//只要有一个为false，isOK的值就是false，

//isOK值为false的话就全部执行一次表单元素的失去焦点事件，从而提示错误信息

//isOK值为true的话才提交表单。

//因为有些页面可能不止一个需要提交的表单或者有些表单元素的name重复，所以根据form name=".. "，来区分元素失去事件，这里是form2就是对应的

function btn_register() {

var isOK = validate2.identity && validate2.name && validate2.phone && validate2.email && validate2.mail && validate2.country && validate2.province && validate2.pwd && validate2.pwd2;

var form2 = $('form[name=form2]');

if(isOK) {

//。。。执行提交事件

form2.submit();

} else {

$('select[name=identity]', form2).trigger('blur');

$('input[name=name]', form2).trigger('blur');

$('input[name=phone]', form2).trigger('blur');

$('input[name=email]', form2).trigger('blur');

$('input[name=mail]', form2).trigger('blur');

$('select[name=country]', form2).trigger('blur');

$('select[name=province]', form2).trigger('blur');

$('input[name=pwd]', form2).trigger('blur');

$('input[name=pwd2]', form2).trigger('blur');

}

}

简要说明：

//执行对应表单元素的失去焦点事件$('input[name=XX]',formX).blur()

//定义对应的参数来获取值，如:var pwd=$(this).val();

//定义参数获取对应错误提示信息的标签元素对象，这里的是var span = $(this).parents('.error_p2').find('.error_p2');

//简要说明.parents('')方法获取的是祖先元素为('.error_p2')，看清楚有带"s"，简单来说如果.error_p2是当前元素的上三级$('this').parent().parent().parent()，而用$('this').parents('.error_p2')能一步到位获取到该元素对象，而find('')方法刚好相反，一步到位的获取对应后辈元素对象

//然后就是根据条件判断，判断的正则表达式我就不一 一举例了(因为我也记不住那么多= =、)，是否符合返回对应的数组元素true、false值，实现隐藏错误提示，并且给数组validate2的值赋值。

//最后提交表单时，再次执行判断isOK是否为true

//isOK值为false的话就全部执行一次表单元素的失去焦点事件，从而提示错误信息

//isOK值为true的话才提交表单。

//ps:表单里的button元素如果不是提交按钮，记得将type=“button”，否则默认是type=“submit”，点击就会提交;

写在最后的话：

样式和布局没怎么设置好，页面效果欠佳，深感抱歉

还是那句话，写jq先想好要获取哪些对象，执行什么事件，最后什么元素对象达到怎样的效果，parents和find方法和省事，不过使用时注意嵌套好p达到整体性效果。

相关推荐：

柳行
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery表单提交带错误信息提示效果
12-29
效果图：     html代码： <form action= method= name=form2> <div class=m_t30> <div> 我是 <select name=identity id=ko class=form-control> <option></option> <option value=investor>投资者</option> <option value=developer>地产开发商</option> </
JQuery+PHP对HTML表单进行验证
05-06
**一、JQuery表单验证** JQuery简化了JavaScript的使用，使得在前端进行表单验证更加便捷。以下是一些关键点： 1. **事件绑定**：使用JQuery，你可以轻松地监听表单提交事件，如`submit`。例如： ```javascript ...
表单提交时如何将错误信息传递到页面中,并且保存原来提交数据
weixin_34235105的博客
08-07 790
2019独角兽企业重金招聘Python工程师标准>>> ...
php提交表单显示在当前页,织梦自定义表单提交后的提示信息改弹窗提示并停留在当前页方法...
weixin_39850697的博客
03-16 187
织梦提示信息改弹窗提示并跳转后停留在当前页面的方法：第一步：找到并打开/include/common.func.php文件，在大概299行找到如下代码：function GetCkVdValue(){@session_id($_COOKIE['PHPSESSID']);@session_start();return isset($_SESSION['securimage_code_value'])...
表单提交提示信息2
wind888673的专栏
07-28 934
      function   deleteOption(src)       {       //   src   ：select对象       var   srcindex=eval(src.btype.selectedIndex);   //当前选中的选项       var   srclength=eval(src.btype.length);   //select对象选项长度，有
php表单提交成功提示信息,PHP_php表单提交程序的安全使用方法，用于显示错误信息和成功信息 - phpStudy...
weixin_42526417的博客
03-18 389
php表单提交程序的安全使用方法用于显示错误信息和成功信息，其实也可以直接echo出错误信息，这里我只是想我的出错信息页面漂亮点，定义了一个页面输出的函数罢了。复制代码 代码如下:// savecomment.php// 大家先不要看注释，看完本文后，再回过头来看require ("config.php");mysql_connect($servername,$dbusername,$dbpass...
jQuery Ajax无刷新提交表单并执行邮件通知
08-13
jQuery表单验证** jQuery提供了丰富的DOM操作和事件处理函数，使得前端表单验证变得简单而高效。在`index.html`中，我们通常会为表单元素绑定`blur`或`change`事件，当用户离开输入框或输入内容改变时进行实时验证...
ajax表单验证简单实现jquery版
03-16
前端接收到响应后，根据isValid的值决定是提交表单还是显示错误信息。 在实际项目中，后端验证脚本`validate.php`可能需要检查用户名是否已存在、密码是否符合复杂性要求等。例如： ```php <?php // validate.php ...
AJAX+PHP 实现表单的即时验证
12-11
总结起来，AJAX+PHP实现的表单即时验证流程包括：前端监听表单字段事件，发送AJAX请求；服务器端处理请求并返回验证结果；前端接收结果并更新用户界面。这种技术使得用户在填写表单时能得到即时反馈，提高了表单交互...
jQueryformBuilder一个jQuery插件能够通过拖放的方式创建表单
08-07
6. **后端集成**：虽然formBuilder本身不处理表单提交，但与各种后端框架（如PHP、Node.js、Ruby on Rails等）结合使用时，可以轻松实现数据收集和处理。 ### 二、使用步骤 1. **引入库**：首先，在HTML文件中引入...
html信息提交提示框
01-09
html信息提交提示框，包含4种不同logo提示:success,fail,timeout,loading
关于表单验证错误提示的几种方式
热门推荐
如何心安理得的在老板眼皮下摸鱼
09-17 1万+
一、用alert()弹出提示框（不提倡）。 通过alert弹出提示框，但输入框多的话会不断弹出提示框，每次都要点确定，很麻烦。 二、利用H5新增的required属性 required 属性规定必需在提交之前填写输入字段。 如果使用该属性，则字段是必填（或必选）的。 注释：required 属性适用于以下 &lt;input&gt; 类型：text, search, url, telep...
php如何实现短信提示,php怎么发短信通知
weixin_36344231的博客
03-09 283
php怎么发短信通知做网站时发送短信验证码的需求很常见，比如手机号注册，密码找回等等。下面一起来了解下如何实现吧。1. 手机号注册的前后端交互的流程；(1)用户操作客户端点击发送验证码，(然后客户端ajax发送请求，并且按钮处于60s静默时间)(2)后端逻辑层，接受传递过来的手机号，验证格式是否合法，进入数据库匹配是否存在(3)生成验证码，存在session中，然后curl发送到第三方的短信接口...
php如何发送短信,PHP发送短信功能
weixin_32262089的博客
03-10 875
标签：发送短信的功能主要在于获得短信接口后，在函数中模仿用户行为，例如浏览器跳转输出短信接口的链接。需要运用的函数为curl_init();curl_setopt();curl_exec();curl_close();function send_sms($phone,$message‘) {$url = //此处为短信接口的链接，具体的用法参考短信接口的说明$ch = curl_init(); /...
PHP表单提交完成提示,用PHP完成表单验证
weixin_39853892的博客
04-03 111
html>content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">Document.list{margin-top:20px;padding-top:20px;border:1px#2aabd2solid;border-ra...
php如何实现短信提示,php实现短信发送代码
weixin_35733790的博客
03-09 361
classSms{private$userId='XXXXX';private$password='XXXXXX';private$templateId='XXXXXX';/***@varstring短信服务器地址*/private$server_uri='XXXXXX';private$port='XXXXXX';/***发送短信*@param$mes...
php关闭确认提交表单,javascript – 在提交PHP表单之前显示确认警报框
weixin_28839699的博客
03-12 143
var validate = (function() {var reClass = /(^|\s)required(\s|$)/; // Field is requiredvar reValue = /^\s*$/; // Match all whitespacereturn function (form) {var elements = form.element...
表单的消息提醒功能丨三叠云教程
triascloud的博客
09-14 578
消息提醒能够对满足条件的数据进行通知，也可以在表单提交、编辑等阶段或者流程开始、结束、或对其他流程节点操作后，通知给指定人员/群会话消息的提示性功能。如在数据新增、修改或者数据到期时，可以对其设置提醒，以便更加科学合理地管理数据，提高工作效率。
php jq 提交表单验证,jquery的表单验证提交
最新发布
05-24
可以使用 jQuery Validation 插件来实现表单验证和提交功能。 首先，在 HTML 中引入 jQuery 和 jQuery Validation 插件的库文件： ```html <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值