[必会] 表单验证+弹框~老司机原生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表单验证插件 ...
随机推荐
- c语言中的指针问题
“*”符号的作用在C语言中有两种: 1.声明该变量是指针,例如:int * p;//表示声明一个int类型的指针,变量名为p 2.在指针运算时,表示取这个地址上的内容,例如 temp = *p;// ...
- JS中的_proto_
var grandfather = function(){ this.name = "LiuYashion" ; } var father = function(){}; fath ...
- Json与类对象转换
Json在js,jquery中可以直接使用,比如下串: { "from":"en" ,"to":"zh" ," ...
- 欢快的使用Unity JSON吧
0x01:前言 Unity 5.3加入了UnityUtility类,意味着Unity终于有了自己原生态的JSON库.Unity主要用来游戏开发,JSON做为游戏开发中最受欢迎的配置文件.在官方没有库支 ...
- 模式窗口刷新不弹出新窗口触发NET事件
最近做项目的时候用到模式窗口,这个东西我从来没有用过,事实上我是讨厌用这个东西,由于项目需要也只好忍着了.在实现的时候发现了一个问题,打开一个模式窗口后如果里面有asp.net控件并绑定有后台事件的话 ...
- GridView布局，自定义适配器，水平滚动
添加GridItem布局XML文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...
- csuoj 1505: 酷酷的单词
http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1505 1505: 酷酷的单词 时间限制: 1 Sec 内存限制: 128 MB 提交: 340 ...
- Ubuntu 安装BCM 43142无线网卡驱动
ubuntu14.04 安装 bcm43142无线网卡 用命令lspci 查看无线网卡类型 然后下载对应的无线网卡驱动. 之后,使用下列命令安装,即可搜索无线热点了: sudo apt-get ins ...
- MyEclipse项目中的包按层次显示
MyEclipse项目中的包按层次显示 如下图所示: window > Navigation > Show View Menu > Package Presentation ...
- 注册、卸载DLL
注册.卸载DLL,一般命令写在bat文件中,下面以注册.卸载SWFToImage.DLL为例. 1.注册文件(Install.bat)内容: REM copying files to the syst ...