jquery判断邮箱及密码是否输入正确的表单提交
jquery我接触的也不是很多,基本就是照着案例然后查相关方法做出来的,基本用了大概半天的时间,手打加查资料实现。具体如下,首先下载一个jquery包,网址是https://jquery.com/download/ 我下载的是第一个Download the compressed, production jQuery 3.2.1 压缩版的3.2.1,第二部引入验证页面,代码<script src="plugins/js/jquery-3.2.1.min.js" type="text/javascript"></script> 路径根据自己放的位置修改,接下来是写入验证代码,写的时候注意语句结构及单词的正确性,否则容易出现不必要的错误,出错后认真调试即可。
<script type="text/javascript">
$(function()
{
$("form :input.required").each(function()
{
var $required = $("<strong class='high'> *<\/strong>");
$(this).parent().append($required);
});
$('form :input').blur(function()
{
var $parent = $(this).parent();
$parent.find(".formtips").remove();
//验证密码
if( $(this).is("#password"))
{
if( this.value=="" || this.value.length< 6)
{
var errorMsg ="请输入至少6位密码";
$parent.append('<span class="formtips onError" >'+errorMsg+'<\/span>');
}else{
var okMsg = '输入正确!';
$parent.append('<span class="formtips onSuccess">'+okMsg+"<\/span>");
}
}
if( $(this).is("#email"))
{
if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value)))
{
var errorMsg = '请输入正确的E_MAIL地址.';
$parent.append('<span class="formtips onError">'+errorMsg+'<\/span>');
}else{
var okMsg = '输入正确!';
$parent.append('<span class="formtips onSuccess">'+okMsg+'<\/span>');
}
}
});
$('#send').click(function()
{
$("form :input.required").trigger('blur');
var numError = $('form .onError').length;
if(numError)
{
return false;
}
return true;
});
//$('#res').click(function()
// {
// $(".formtips").romove;
// })
})
</script>
form内容是这样的
<form id='login' action='login.php' method='post' accept-charset='UTF-8' name="myfrom">
<h1>Sign in</h1><hr/>
<table style="width:80%;">
<tr><td width="24%">Email</td><td width="76%"><input type="text" name="email" id="email" style="width:200px;" class="required"/></td></tr>
<tr><td>Password</td><td><input type="password" name="password" style="width:200px;" id="password" class="required" /></td></tr>
<tr><td>Remember Me</td><td><input type="checkbox" name="remember" id="password:" /></td></tr>
<tr><td><a href="forgetpassword.php">Forgot your Password?</a></td><td><input type="submit" value="Sign In" name="submit" style="width:150px;" id="send" /></td></tr>
<tr><td colspan="2"> </td></tr>
<tr><td colspan="2"><a href="signup.php">Sign up</td></tr>
</table>
</form>
基本这样就可以了,不过jquery代码还有可以精简的地方,这个有待后期接着研究。
jquery判断邮箱及密码是否输入正确的表单提交的更多相关文章
- jQuery同一标签多个相同事件 return语句 表单提交实例
如form表单的submit,a标签都自带一个鼠标单击事件,其实我们还可以额外填加单击事件 如:$(':submit').click(); 则自定义的单击事件先执行,然后才是标签自带的单击事件(c ...
- jquery插件-表单提交插件-jQuery.Form
1.介绍 JQuery Form插件是一款强大的Ajax表单提交插件,可以简单方便的实现让我们的表单 由传统的提交方式转换成Ajax无刷新提交! 他提供了两个核心的方法ajaxForm以及ajaxSu ...
- jQuery判断 form表单提交时一些文本框的判断
一: form表单提交时如果表单里有input标签为空那么不提交form表单. <head> <script type="text/javascript"> ...
- 织梦cmsf表单提交到邮箱 织梦表单发送到邮箱 织梦自定义表单发邮箱
大家在做织梦做网站开发时会遇到一个问题:织梦的自定义表单是一个很鸡肋的功能,不仅在后台展示得奇丑,而且也没有提醒功能,使用起来很不方便.很多人用织梦自定义表单时,都想用户提交表单的时候可以发送到自己的 ...
- jquery.form.js 让表单提交更优雅
jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1 ...
- MVC中处理表单提交的方式(Ajax+Jquery)
MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单: <form class="row form-body form-horizontal m-t&q ...
- 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件
表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...
- 浏览器下载/导出文件 及jQuery表单提交
1 比如以下按钮, 用于导出文件,如EXCEL文件. <li> <button class="whiteBg btn2" onclick="doExp( ...
- jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用
一.jQuery Form的其他api 1. formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...
随机推荐
- DES原理及代码实现
一.DES基础知识DES技术特点 DES是一种用56位密钥来加密64位数据的方法 DES采取了分组加密算法:明文和密文为64位分组长度 DES采取了对称算法:加密和解密除密钥编排不同外,使 ...
- N - Remove Adjacent CodeForces - 1321C
题目大意:删除字符,当一个字符左边或者右边存在一个比它小“1”的字符那么就可以将这个字符删除,问最多能删除多少个字符 思路,:刚开始想的是,对于单调连续的字符,可以直接删除,比如,单点增的字符只保留前 ...
- [php代码审计]bluecms v1.6 sp1
一.环境搭建 bluecms v1.6 sp1源码 windows 7 phpstudy2016(php 5.4.45) seay源代码审计系统 源码在网上很容易下载,很多教程说访问地址 http:/ ...
- weblogic漏洞(一)----CVE-2017-10271
WebLogic XMLDecoder反序列化漏洞(CVE-2017-10271) 0x01 漏洞原因: Weblogic的WLS Security组件对外提供webservice服务,其中使用了XM ...
- 从零开始建图床 minio
图床 图床可以参考知乎这篇文章 一些小众图床有空空间免费,但不知道什么时候会挂掉.前些年用过的极简图床,现在也销声匿迹: 大厂提供的有限免费空间,七牛云10G空间,10Gb/月 流量免费:但如果使用h ...
- 看完肯定懂的 Java 字符串常量池指南
字符串问题可谓是 Java 中经久不衰的问题,尤其是字符串常量池经常作为面试题出现.可即便是看似简单而又经常被提起的问题,还是有好多同学一知半解,看上去懂了,仔细分析起来却又发现不太明白. 背景说明 ...
- C语言如何实现继承及容器
继承的概念 继承是面向对象软件技术当中的一个概念,与多态.封装共为面向对象的三个基本特征.继承可以使得子类具有父类的属性和方法或者重新定义,追加属性和方法. 面向对象中的重要概念就是类,在我们熟知的编 ...
- <cstring>中常用的两个函数memset()和memcpy()
<cstring>是c++对c中的<string.h>进行了重写,这两个头文件中的函数用法是一样的,所以在用的时候包含哪个头文件都行.下面介绍一下 <cstring> ...
- curl的$post传递多维数组
php curl传数组的话只能传一维数组,如果想传多维数组:两个方法: 1.转换成json在传输 2. //通过curl模拟post的请求: function SendDataByCurl($url, ...
- python学习01python入门一
在正式开启python代码的学习之旅之前,先来了解一下有关python语言的一些内容吧. python的命名,起源等等,大家自行百度了解,此处不再赘述. python是一种解释型语言,具有强调代码可读 ...