[必会] 表单验证+弹框~老司机原生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表单验证插件 ...
随机推荐
- ios 父VIew的宽度 等于较大view的宽度，并且垂直居中
白色view上面有两个子View,红色view和橙色view.白色view的宽度等于橙色view和红色view宽度较大的一个,并且橙色view和红色view垂直居中, Masonry布局如下: ...
- Metasploitable 2系列教程：信息收集
Metasploitable 2 系统是一个基于ubuntu 的系统.其设计的最初目的为安全工具测试和常见漏洞攻击演示.而在这篇关于 Metasploit 的教程中,我们将列举有关 Metasploi ...
- git -c diff.mnemonicprefix=false -c core.quotepath=false -c credential.helper=sourcetree fetch origin
git -c diff.mnemonicprefix=false -c core.quotepath=false -c credential.helper=sourcetree fetch origi ...
- windows下MySQL更改数据库文件目录及1045,1067错误
MySQL安装时不能选择数据库文件的安装位置, 也没有可用的直接更改数据库目录的工具,要想更改数据目录,方法如下: MySQL安装并配置完毕,默认的数据哭安装目录为 C:/ProgramData/My ...
- Python之路-python(paramiko，进程和线程的区别，GIL全局解释器锁，线程)
一.paramiko 二.进程.与线程区别 三.python GIL全局解释器锁 四.线程 语法 join 线程锁之Lock\Rlock\信号量 将线程变为守护进程 Event事件 queue队列 生 ...
- 设计模式之 -- 状态模式(State)
状态模式允许对象在内部状态改变时改变它的行为,对象看起来好像修改了它的类.当控制一个对象的状态转换条件分支语句(if...else或switch...case)过于复杂时,可以此模式将状态的判断逻辑 ...
- Oracle配置本地网络服务名
Oracle安装完成后,可以使用客户端自带的的网络配置向导(Net Configuration Assistant)进行配置 1.启动Net Configuration Assistant.选择&qu ...
- background-clip,background-origin
开门见山,简单来说 background-origin定义了background的绘制区域(就是从什么地方开始绘制),三个属性 padding-box 背景图像相对于内边距框来绘制border-box ...
- js_css_dl.dt实现列表展开、折叠效果
第一种方式:不提倡 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- VS2010使用TTS
最近在写纯车牌停车管理系统,需要用到语音合成功能. 目前最常用的Windows Speech SDK版本有三种:5.1.5.3和5.4. Windows Speech SDK 5.1版本 ...