[必会] 表单验证+弹框~老司机原生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表单验证插件 ...
随机推荐
- hibernate学习（5）——对象状态与一级缓存
1.对象状态 1.1 状态介绍 hibernate 规定三种状态:瞬时态.持久态.脱管态 瞬时态:transient,session没有缓存对象,数据库也没有对应记录.没有与hibernate关联 ...
- ThinkPHP的缓存技术
原文:ThinkPHP的缓存技术 如果没有缓存的网站是百万级或者千万级的访问量,会给数据库或者服务器造成很大的压力,通过缓存,大幅减少服务器和数据库的负荷.假如我们 把读取数据的过程分为三个层,第一个 ...
- spring与redis简单整合
项目结构 整合需要的依赖 <dependencies> <dependency> <groupId>org.springframework</groupId& ...
- Unity中那些事半功倍的好插件
Unity开发最好的地方就是有各种强大的插件,有哪些插件让大家事半功倍,稳定强大 值得推荐学习和入手呢?Unity5.0之后,制作UI 以及UI的动画,UI特效,大家一般都使用什么插件?或者说有什么好 ...
- winform 对话框、打印框
winform 对话框控件 1.打开文件对话框(OpenFileDialog) 2.保存文件对话框(SaveFileDialog) 3.字体对话框(FontDialog) 4.颜色对话框(ColorD ...
- sklearn Model-selection + Pipeline
1 GridSearch import numpy as np from sklearn.datasets import load_digits from sklearn.ensemble impor ...
- 《zw版·Halcon-delphi系列原创教程》 只有2行代码的超市收款单ocr脚本
<zw版·Halcon-delphi系列原创教程> 只有2行代码的超市收款单ocr脚本只有2行代码的超市收款单ocr脚本 发了这么多教程,有网友问,为什么没有ocr的. 的确,在 ...
- Windows便笺 快捷键
便笺快捷键 便笺快捷键多数与Office相同 Ctrl+N 新建 Alt+F4 关闭便笺,下次打开内容还在 Ctrl+D 删除 Ctrl+E 居中 Ctrl+R 右对齐 Ctrl+L 左对齐 Ctrl ...
- 《Node.js开发指南》的少许坑儿~
由于express升级到3.0,造成这本书看起来more and more蛋疼.记录少许坑儿,方便后来人. 一.node.js在windows下的安装 书中在两处介绍了两种方式,其实现在的node.j ...
- ubuntu 如何 su 到 root（作为 root 用户操作）
ubuntu 安装后,root用户默认被锁定,不允许登录,也不允许"su"到 root.对于桌面用户来说,这样安全性更高一些,但对于服务器可以设置成"允许 su 到roo ...