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'>&nbsp;&nbsp;*<\/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">&nbsp;</td></tr>
<tr><td colspan="2"><a href="signup.php">Sign up</td></tr>
</table>
</form>

基本这样就可以了,不过jquery代码还有可以精简的地方,这个有待后期接着研究。

jquery判断邮箱及密码是否输入正确的表单提交的更多相关文章

  1. jQuery同一标签多个相同事件 return语句 表单提交实例

    如form表单的submit,a标签都自带一个鼠标单击事件,其实我们还可以额外填加单击事件 如:$(':submit').click();   则自定义的单击事件先执行,然后才是标签自带的单击事件(c ...

  2. jquery插件-表单提交插件-jQuery.Form

    1.介绍 JQuery Form插件是一款强大的Ajax表单提交插件,可以简单方便的实现让我们的表单 由传统的提交方式转换成Ajax无刷新提交! 他提供了两个核心的方法ajaxForm以及ajaxSu ...

  3. jQuery判断 form表单提交时一些文本框的判断

    一: form表单提交时如果表单里有input标签为空那么不提交form表单. <head> <script type="text/javascript"> ...

  4. 织梦cmsf表单提交到邮箱 织梦表单发送到邮箱 织梦自定义表单发邮箱

    大家在做织梦做网站开发时会遇到一个问题:织梦的自定义表单是一个很鸡肋的功能,不仅在后台展示得奇丑,而且也没有提醒功能,使用起来很不方便.很多人用织梦自定义表单时,都想用户提交表单的时候可以发送到自己的 ...

  5. jquery.form.js 让表单提交更优雅

    jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1 ...

  6. MVC中处理表单提交的方式(Ajax+Jquery)

    MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单: <form class="row form-body form-horizontal m-t&q ...

  7. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

  8. 浏览器下载/导出文件 及jQuery表单提交

    1 比如以下按钮, 用于导出文件,如EXCEL文件. <li> <button class="whiteBg btn2" onclick="doExp( ...

  9. jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用

    一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...

随机推荐

  1. linux下的信号量PV操作进阶之路

    一.同步和互斥机制 信号量 互斥锁 同步:指多个任务按照约定的先后次序相互配合来完成一件事情. 比如读线程等待写线程写完之后再去读. 二.信号量-P/V操作 P(s)含义: if(信号量>0) ...

  2. 漫谈LiteOS-Huawei_IoT_Link_SDK_OTA 开发指导

    1概述 在应用升级过程中,无线下载更新(OTA)是一种常用,且方便的升级方式.Liteos采用的OTA升级方案基于LwM2M协议,实现了固件升级(FOTA)和软件升级(SOTA)两种升级方案.用户可根 ...

  3. Java核心技术--接口与内部类

    接口implement 继承接口,即履行"义务". 接口中所有的方法自动属于public,在接口声明中,不必提供关键字public 接口中决不能含有实例域,也不能在接口中实现方法 ...

  4. 【特征检测】BRISK特征提取算法

    [特征检测]BRISK特征提取算法原创hujingshuang 发布于2015-07-24 22:59:21 阅读数 17840 收藏展开简介        BRISK算法是2011年ICCV上< ...

  5. 今天我们谈一下HTML标签中的<map>标签的用法和使用场景

    首先我们看下这个标签到底是干什么的! W3C的定义: 然后兼容性: 然后与之配套使用的另一个标签: <area/>规定其区域: 我们来看看<map>标签支不支持全局属性:=== ...

  6. 15分钟从零开始搭建支持10w+用户的生产环境(二)

    上一篇文章,把这个架构的起因,和操作系统的选择进行了详细说明. 原文地址:15分钟从零开始搭建支持10w+用户的生产环境(一)   二.数据库的选择 对于一个10W+用户的系统,数据库选择很重要. 一 ...

  7. AppBoxFuture: Web在线报表设计与PDF生成

      企业应用需要打印各类单证及报表,为了方便开发此类应用作者在框架内集成了报表引擎,并且实现了基于Canvas的Web在线报表设计及基于PDFJS的报表查看与打印. 一.原理浅析 报表模型:由Xml描 ...

  8. shiro:注解配置(五)

    基于[shiro集成spring]项目改造 引入相关依赖环境 <!--AOP的jar包--> <dependency> <groupId>org.aspectj&l ...

  9. python正则表达式详解之Match类及其方法

    1.Match对象简介 match对象通常是由正则表达式对象的match 方法,search 方法等经过匹配之后而产生.可以直接当做bool值使用,如果匹配则相当于True, 如果不匹配,则返回Non ...

  10. LaTex中文article模板(支持代码、数学、TikZ)

    代码 请使用XeLatex编译 main.tex \documentclass{article} \usepackage{ctex} %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% ...