表单 用jquery做输入脱离焦点 进行正则验证
<!-- 账号登录块 -->
<form class="form1" action="" method="get" onsubmit="return sub();">
<label></label>
<input class="user-name user" type="text" placeholder="邮箱/手机号码/小米ID">
<input class="user-name mima" type="password" name="" id="" value="" placeholder="密码">
<div class="clear"></div>
<p class="alert at1">
<span>!</span>
账号格式不正确
</p>
<p class="alert at2">
<span>!</span>
密码格式不正确
</p>
<input class="loading" type="submit" id="" name="" value="登录" />
</form>
<!-- 手机短信登录注册快 -->
<form class="form2" action="" method="get">
<label class="lb1">+86</label>
<input class="user-name phone" type="text" placeholder="手机号码">
<input class="user-name yzm" type="password" name="" id="" value="" placeholder="短信验证码"><label class="lb2">获取验证码</label>
<div class="clear"></div>
<p class="alert at3">
<span>!</span>
手机号格式不正确
</p>
<p class="alert at4">
<span>!</span>
短信验证码不正确
</p>
<input class="loading" type="submit" id="" name="" value="立即登录/注册" />
</form>
// 用户名验证
$(".user").focus(function(){
$(".user").css("background-color","#FFFFCC");
});
$(".alert").hide();
$(".user").blur(function(){
var n = $(".user").eq(0).val();
if(!isMobil(n)){
if(!isMail(n))
{
if (!isTrueName(n)) {
$(".at1").show();
$(".user").eq(0).css("border-color","red");
} else{
$(".alert").hide();
$(".user").eq(0).css("border-color"," #ABADB3");
}
}else{
$(".alert").hide();
$(".user").eq(0).css("border-color"," #ABADB3");
}
}else{
$(".alert").hide();
$(".user").eq(0).css("border-color"," #ABADB3");
}
});
// 密码验证
$(".mima").focus(function(){
$(".mima").css("background-color","#FFFFCC");
});
$(".alert").hide();
$(".mima").blur(function(){
var m = $(".mima").eq(0).val();
if(!isPasswd(m)){
$(".at2").show();
$(".mima").eq(0).css("border-color","red");
}else{
$(".alert").hide();
$(".mima").eq(0).css("border-color"," #ABADB3");
}
});
//手机格式验证
$(".phone").focus(function(){
$(".phone").css("background-color","#FFFFCC");
});
$(".alert").hide();
$(".phone").blur(function(){
var p = $(".phone").eq(0).val();
if(!isMobil(p)){
$(".at3").show();
$(".phone").eq(0).css("border-color","red");
}else{
$(".alert").hide();
$(".phone").eq(0).css("border-color"," #ABADB3");
}
});
//验证码
$(".yzm").focus(function(){
$(".yzm").css("background-color","#FFFFCC");
});
$(".alert").hide();
$(".yzm").blur(function(){
var y = $(".yzm").eq(0).val();
if(!isyzm(y)){
$(".at4").show();
$(".yzm").eq(0).css("border-color","red");
}else{
$(".alert").hide();
$(".yzm").eq(0).css("border-color"," #ABADB3");
}
});
});
验证函数
/* 校验手机号 */
function isMobil(s)
{
var patrn=/^1(3|4|5|7|8)\d{9}$/;
if (!patrn.exec(s)) {return false}
else{return true}
}
/*邮箱验证*/
function isMail(s)
{
var patrn=/^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$/;
if (!patrn.exec(s)) {return false}
else{return true}
}
/* 校验用户名 */
function isTrueName(s)
{
var patrn=/^[a-zA-Z]{4,8}$/;
if (!patrn.exec(s)) {return false}
else{return true}
}
//校验密码:只能输入6-20个字母、数字、下划线
function isPasswd(s)
{
var patrn=/^(\w){6,20}$/;
if (!patrn.exec(s)) {return false}
else{return true}
}
/* 校验手机号 */
function isyzm(s)
{
var patrn=/^\d{5}$/;
if (!patrn.exec(s)) {return false}
else{return true}
}
表单 用jquery做输入脱离焦点 进行正则验证的更多相关文章
- 在表单提交之前做校验-利用jQuery的submit方法
点击表单中的提交按钮,默认就会提交表单,如果要在表单提交之前做一些校验,那么就可以用jQuery的submit方法. 也就是jQuery的submit的方法执行顺序,在表单的提交之前.用法如下: $( ...
- Web开发——HTML基础(HTML表单/下拉列表/多行输入)
参考: 参考:http://www.w3school.com.cn/html/html_forms.asp 目录: 1.<form> 元素 1.1 <input> 元素(输入属 ...
- 15 款优化表单的 jQuery 插件
网页上的表单提供给用户的一种交互的方式,用户输入数据,提交到服务器,等待后续的处理.这些表单在我们浏览的网页中随处可见,也容易被我们忽略. 比如,“联系我们”页面会提供一个表单给用户填写他们的信息和想 ...
- Form表单利用Jquery Validate验证以及ajax提交
#表单利用Jquery验证验证以及ajax提交 概述>详细讲解表单利用Jquery >验证验证以及ajax提交的过程,以及Validate的自定义提示语,非空判断,输入字段的远程ajax验 ...
- Jquery easyui 重置按钮,easyui 清空表单,Jquery easyui 重置表单
Jquery easyui 重置按钮,easyui 清空表单,Jquery easyui 重置表单 >>>>>>>>>>>>&g ...
- ios手机弹出层上表单的操作,收起键盘焦点错乱的问题
今天遇到了ios手机下 弹出层上form表单 当收起键盘后,焦点错乱,无法再操作的问题 解决办法 function device() { const u = navigator.userAgent; ...
- 让input表单输入框不记录输入过信息的方法
有过表单设计经验的朋友肯定知道,当我们在浏览器中输入表单信息的时候,往往input文本输入框会记录下之前提交表单的信息,以后每次只要双击input文本输入框就会出现之前输入的文本,这样有时会觉得比较方 ...
- spring mvc表单的展现、输入处理、校验的实现
之前已经实现了spring mvc的入门例子及如何处理带参数的请求Controller编写.本文主要记录: 1)重定向请求 2)处理路径中含有变量的请求 3)使用JSR-303进行校验 ① 首先,编写 ...
- Jquery validate验证表单时多个name相同的元素只验证第一个的问题
下面搜集了五种方法,主要还是前两个提供了解决方案,第三种需要修改jQuery源码: 修复jquery.validate插件中name属性相同(如name='a[]')时验证的bug 使用jquery. ...
随机推荐
- 天道神诀---FTP服务
FTP 2种模式 主动模式(默认) 客户端以1024-65535之间某一端口发送指令到服务端的21端口,并建立连接.服务端接受到以后,以20端口去连接客户端,建立一条新的链接并传输数据 被动模式 客户 ...
- vue on emit 父子之间传值应用详细代码
大概很多人都知道用这个,网上教程也一大堆,但我想说的是一定要手动敲一遍,敲一遍,敲一遍,重要的事情说三遍. 大概有些人也不知道它该何时用on,或者emit 的吧? 先说两个我项目中用到的场景吧: 项目 ...
- vuex-along解决vuex中存储的数据在页面刷新之后失去的问题
1. 为什么会失去? vuex可以看成是一个"提升变量"的一个工具,它是将state当做全局变量存储.F5刷新页面之后自然随着页面的刷新重新初始化state. 2. 如果解决数据保 ...
- c# mvc 简洁大气官网
后台管理 https://g.alicdn.com/idleFish-F2e/app-basic/item.html?itemid=580281597427&ut_sk=1.WCB2zfWM% ...
- 将时间 '2018-08-06T10:00:00.000Z' 格式转化为本地时间
参考:https://blog.csdn.net/sxf_123456/article/details/81582964 参考模板: from datetime import datetime, ti ...
- pyJWT
现在用JWT 加密太火了,怎么能不跟上潮流?否则销售都不好意思出去吹牛逼! PyJWT是一个Python库,用来编码/解码JWT(JSON Web Token)的 1.定义:根据维基百科的定义,JSO ...
- Html+css编写太阳星系
我们都知道太阳系是以太阳为中心的,和所有受到太阳的引力约束天体的集合体.包括八大行星(由离太阳从近到远的顺序:水星.金星.地球.火星.木星.土星.天王星.海王星),而我用html和css所写的就是八大 ...
- 运行Hama实例PageRank
- Linux 网络 tcp C/S通信模型
C/S模型就是server 与 client 的模型 TCP服务器模型流程图 ...
- cookie、session、sessionStorage和localStorage
摘抄并整理后查 cookie 和 session 一般用来跟踪浏览器的用户身份 Session的存储方式 1. 使用cookie:保存 session id 的方式可以采用 cookie,这样在交互过 ...