[必会] 表单验证+弹框~老司机原生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表单验证插件 ...
随机推荐
- LeetCode Encode and Decode Strings
原题链接在这里:https://leetcode.com/problems/encode-and-decode-strings/ 题目: Design an algorithm to encode a ...
- [BS-27] 创建NSURL的几个方法的区别
创建NSURL的几个方法的区别 URL的基本格式 = 协议://主机地址/路径 URL和Path的区别 * URL:统一资源定位符,格式 “协议+主机名称+路径” 例如:[NSURL UR ...
- CSS display 属性
实例 使段落生出行内框: p.inline { display:inline; } 所有主流浏览器都支持 display 属性. 注释:如果规定了 !DOCTYPE,则 Internet Explor ...
- PRML读书笔记——2 Probability Distributions
2.1. Binary Variables 1. Bernoulli distribution, p(x = 1|µ) = µ 2.Binomial distribution + 3.beta dis ...
- qunit学习（一）
QUnit是一个强大的JavaScript单元测试框架,用于调试代码.该框架是由jQuery团队的成员所开发,并且是jQuery的官方测试套件.任意正规JavaScript代码QUnit都能测试. 其 ...
- 【Selenium】2.安装Selenium IDE和 FireBug
本文供学习交流之用,没有商业用途,没有盈利. 完全是我自己为督促自己学习而翻译的.翻译的不好,见谅.来源于:http://www.guru99.com/install-selenuim-ide.htm ...
- logstash5.x配置
logstash --help --可以通过此命令看到所有命令 -f, --path.config --配置文件路径 -e, --config.string --可直接运行的配置字符串 -w, --p ...
- android opengl
引用:http://weimingtom.iteye.com/blog/1616972 二维坐标系变换为原点在左上角(测试用) * GLES * JOGL * LWJGL * libgdx(使用g2d ...
- 15. 星际争霸之php设计模式--策略模式
题记==============================================================================本php设计模式专辑来源于博客(jymo ...
- 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数011,ocr，字符识别
<zw版·Halcon-delphi系列原创教程> Halcon分类函数011,ocr,字符识别 为方便阅读,在不影响说明的前提下,笔者对函数进行了简化: :: 用符号“**”,替换:“p ...