[必会] 表单验证+弹框~老司机原生js
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>恰恰瓜子兑换</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0">
<meta name="format-detection" content="telephone=no">
<link href="http://css.jj.cn/css/my_mob/activity/qiaqiaguazi.css" rel="stylesheet"/>
<script src="http://css.jj.cn/js/pub_rem.js" type="text/javascript" ></script>
<script src="http://css.jj.cn/js/jquery.js" type="text/javascript"></script>
</head>
<body>
<!--structure s-->
<div class="wrapper">
<div class="header">
<a href="#">活动详情 > ></a>
<img src="http://img1.jj.cn/acts/2016/hd_20160527_2/qq_banner.jpg" />
</div>
<form action="#" id="form_list_submit" method="post">
<ul class="form_list">
<li>
<input id="check_phone" type="text" name="mobile" placeholder="手机号" />
<em id="check_phone_err"></em>
</li>
<li>
<input type="password" id="check_password" placeholder="登录密码" />
<em id="check_password_err"></em>
</li>
<li class="phone_num">
<span class="phone_word" id="check_phone_num">
<input type="text" class="no_input" placeholder="输入验证码" disabled/>
<span></span>
<button class="obtain_word" type="button">获取验证码</button>
</span>
<span id="phone_word_err"></span>
<!-- <input type="text" id="smscode" type="text" value="" disabled/>
<span class="get_num" type="button" id="getCode" onclick="getMsgCode();" >获取验证码</span>-->
</li>
</ul>
<button class="but big_but" id="submit_but" type="button">我要参加</button>
</form>
</div>
<script type="text/javascript" src="http://css.jj.cn/js/my.cl/2015/input_check_15.js"></script>
<script language="JavaScript" type="text/javascript">
$("#check_phone").blur(function () {
var pnone_num = $(this).val();
var car_check = input_check.check_phone({
num: pnone_num
});
input_check.notice({
id: "check_phone_err",
msg: car_check.MSG,
flag: car_check.REV,
fn: function () {
var msg = ""
$("#check_phone")[0].on_check = car_check.REV;
if(car_check.REV){
$.getJSON("http://a4.act.jj.cn/reg/check_loginname.php?loginname=" + pnone_num + "®type=2&n=1&callback=?", function (data) {
if(data.REV){
input_check.check_phone_num({
ajax_url:"http://a4.act.jj.cn/reg/get_sms_code.php",
box_id: "check_phone_num",
typeID: 10,
smsControlID: 5,
mobile: pnone_num,
fn:function(obj){
input_check.notice({
id: "phone_word_err",
msg: obj.MSG,
flag: obj.REV
});
$("#check_phone_num input")[0].on_check = obj.REV;
}
});
}else{
msg = decodeURI(data.MSG)
input_check.notice({
id: "check_phone_err",
msg: msg,
flag: data.REV
});
}
}); }
}
});
}).focus(function (ev) {
var ev = ev || event;
input_check.notice({
id: "check_phone_err",
ev: ev
});
}); $("#check_password").blur(function () {
var password = $(this).val();
var car_check = input_check.check_pwd({
num: password
});
input_check.notice({
id: "check_password_err",
msg: car_check.MSG,
flag: car_check.REV,
fn: function () {
$("#check_password")[0].on_check = car_check.REV
}
});
}).focus(function (ev) {
var ev = ev || event;
input_check.notice({
id: "check_password_err",
ev: ev
});
}); $('#submit_but').click(function(){
var submit_but = true;
if(!$("#check_phone")[0].on_check){
var submit_but = false;
$("#check_phone")[0].focus();
$("#check_phone")[0].blur();
}
if(!$("#check_password")[0].on_check){
var submit_but = false;
$("#check_password")[0].focus();
$("#check_password")[0].blur();
}
if(!$("#check_phone_num input")[0].on_check){
var submit_but = false;
input_check.notice({
id: "phone_word_err",
msg: "请输入验证码",
flag: false
});
} if(submit_but){
form_list_submit.submit();
} });
</script>
<script type="text/javascript" src="http://css.jj.cn/js/acts/2016match/pop_box.js" > </script>
</body>
</html>
[必会] 表单验证+弹框~老司机原生js的更多相关文章
- react.js 表单验证-登录框
import React,{ Component } from 'react'; import style from 'cms.css'; /** * 路由路径 登录成功后页面跳转到index * ...
- [JavaScript] 表单验证不通过不提交的JS写法
主要是本世纪初的写法.<script> function validateForm(f) { if (f.name.value == "") { alert(" ...
- 基于Jquery Validate 的表单验证
基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...
- jquery validate强大的jquery表单验证插件
jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...
- jQuery-easyui和validate表单验证实例
jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...
- jQuery.validate.js表单验证插件
jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...
- tipsText表单验证（注册）
注册表单验证脚本 <script src="/assets/skins/js/jquery-1.11.2.min.js"></script> <scr ...
- ElementUi rules表单验证
ElementUi 表单验证 工作中常用到的JS验证 可以在pattern中书写正则,并且配合elementUI进行表单验证. pattern 属性规定用于验证输入字段的模式.模式指的是正则表达式. ...
- jquery.validate.js使用之自定义表单验证规则
jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...
随机推荐
- Java中Double类型计算问题
public class Test{ public static void main(String args[]){ System.out.println(0.05+0.01); ...
- JQuery-事件(部分)
/* 1. bind跟on是类似的方法,下面示例可相互替换 $('#click1').on('click',toYellow); // click绑定toYellow方法 $('#click1').o ...
- 在Win7系统中搭建Web服务器
局 域网Web服务器的主要功能是实现资源共享,同时借助于局域网服务器访问页面可有效的实现信息的同步.利用Web服务器,我们随时随地都可以将自己的信息 上传到服务器端,让其它关注你的用户能在第一时间内了 ...
- 程序最多能new多少内存（2G内存里要放程序的5大区，HeapAlloc比new要快多了，而且超过2G的时候会告诉你）
根据<Windows核心编程>得知:X86操作系统提供每个程序最多只有4G的虚拟内存,其中2G虚拟内存提供给系统用(具体用来干什么还待考察),还有2G的内存留给用户使用.那这2G内存能拿来 ...
- ERROR 2006 (HY000) at line xx: MySQL server has gone away 解决方法
- Codeigniter2.25部署Linux(php5.6)
1).默认路由:修改system/core/Router.php 中第146行.如下图所示.ps:转换成小写我也是醉了...注释的代表是codeigniter作者写的,而上面的是我更改的 2).mod ...
- Unit02-OOP-对象和类，数组（下）
Unit02-OOP-对象和类,数组(下) 1.方法的签名: 方法名+参数列表 2.方法的重载(Overload): 1)发生在一个类中,方法名称相同,参数列表不同 2)编译器在编译时自动根据签名 ...
- Android 自定义RecyclerView 实现真正的Gallery效果
http://blog.csdn.net/lmj623565791/article/details/38173061
- iOS UITableView 移除单元格选中时的高亮状态
在处理UITableView表格时,我们希望用户能够和触摸单元格式进行交互,但是希望用户在完成交互之后,这些单元格的选中状态能够消失,.Cocoa Touch 提供了两种方法来防止单元格背持久选中. ...
- MVC 发布
发布为局域网可用:以IP地址访问 安装IIS 发布 出现的错误: 处理程序"BlockViewHandler"在其模块列表中有一个错误模块"ManagedPipeline ...