//文件check.js
//将方法句柄赋值给变量$，简化document.getElementById();
var $ = document.getElementById;
//定义模拟类(定义Check类的构造方法)
function Check(formId, fieldNum, submitId, validImg, invalidImg) {
  //  alert("1");
    this.currentSelector = '';  //属性，指向要验证的表单
    this.currentForm = formId; //赋值，指向要验证的表单
    this.num = 0;  //验证通过的表单数量，初始化0，通过则自动加1
    this.numToValid = fieldNum;  //form中总共要验证的表单数量
    this.submit = submitId;  //提交表单的id
    this.validImg = validImg;  //通过图标 “img/check.gif”
    this.invalidImg = invalidImg;  //是吧图标 “img/error.gif”
   // alert("a");
    document.getElementById(formId).reset();  //
   // alert("b");
    
}
//preload属性值的类型是Function，即匿名函数，可以通过this.preload()调用
Check.prototype.preload = function (selector) {
    if (selector) {
        //this指向Check类的一个对象，currentSelector是动态生成的Check类的属性，指向某个验证表单validImg和invalidImg是某个表单的属性，此属性是一个img元素
        if (!this.currentSelector.validImg && !this.currentSelector.invalidImg) {
            //this.validImg是在构造函数中生成的属性，在构造函数中赋值，将值取出赋值给this.currentSelector.validImg
            this.currentSelector.validImg = createNode('img', { src: this.validImg });
            this.currentSelector.invalidImg = createNode('img', { src: this.invalidImg });
        }
        //为currentSelector生成一个isValid属性，初始化False，表示验证未通过
        if (!this.currentSelector.isValid == undefined) {
            this.currentSelector.isValid = false;
        }
    }
}
//================================================阶段1练习
function createNode(e, obj) {
    var ele = document.createElement(e);
    for (prop in obj) {
        ele[prop] = obj[prop]; //将obj的全部属性赋给新创建的元素
    }
    return ele;
}
function removeNode(node) {
    if (node != null && node.parentNode != null) {
        try {
            node.parentNode.removeChild(node);
        }
        catch (err) {
            alert(err.message);
        }
    }
}
function InsertAfter(parent, node, refNode) {
    parent.insertBefore(node, refNode.nextSibling);
}
//-----------------------
//2
//所有的验证逻辑都集中到该方法
Check.prototype.check = function (selector, inputType) {
   // alert("2");
    this.currentSelector = selector;
    this.preload(selector);
    var isCheck = false;//
    switch (selector.type) {
        case 'undefined':
            break;
        case 'radio':
            for (var x = 0; x < selector.length; x++) {
                //
                isCheck = true;
                break;
            }
        case 'select-one': //
            if (selector.length > 0) {
                isCheck = true;
                break;
            }
        case 'select-multiple': //
            for (var x = 0; x < selector.length; x++) {
                if (selector[x].selected == true) {
                    isCheck = true;
                    break;
                }
            }
        case 'checkbox':
            if (selector.checked) {
                isCheck = true;
                break;
            }
        default:
            if (selector.value.length > 0) {
                if (selector.value.length <= selector.maxLength) {
                    switch (inputType) {
                        case 'email':
                            isCheck = this.checkEmail();
                            break;
                        case 'url':
                            isCheck = this.checkUrl();
                            break;
                        case 'number':
                            isCheck = this.checkNum();
                            break;
                        case 'phone':
                            isCheck = this.checkPhone();
                            break;
                        case 'zip':
                            isCheck = this.checkZip();
                            break;
                        case 'cardId':
                            isCheck = this.checkId();
                            break;
                        case 'pwd':
                            isCheck = this.checkPwd();
                            break;
                        case 'date':
                            isCheck = this.checkDate();
                            break;
                        default:
                            {
                                isCheck = true;
                                break;
                            }
                    }
                } else { break; }
            } else { break; }
    }
    if (isCheck) this.valid(); //通过
    else this.invalid(); //未通过
}
//2-----------------
//================================================阶段2练习
//email验证
Check.prototype.checkEmail = function () {
    var str = this.currentSelector.value;
    var reg = new RegExp("^[0-9a-zA-Z]+@[0-9a-zA-Z]+[\.]{1}[0-9a-zA-Z]+[\.]?[0-9a-zA-Z]+$");
    if (reg.test(str)) {
        return true; //验证通过
    }
    return false; //验证失败
}
//URL验证:如http://regxlib.com/Default.aspx | http://electronics.cnet.com/electronics/0-6342366-8-8994967-1.html
Check.prototype.checkUrl = function () {
    var str = this.currentSelector.value;
    var re = new RegExp("(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?");
    if (reg.test(str)) {
        return true; //验证通过
    }
    return false; //验证失败
}
//数字验证
Check.prototype.checkNum = function () {
    var str = this.currentSelector.value;
    var reg = new RegExp("\\d");//注意“\”需要转义
    if (reg.test(str)) {
        return true; //验证通过
    }
    return false; //验证失败
}
//中国固定电话格式验证
Check.prototype.checkPhone = function () {
    var str = this.currentSelector.value;
    var reg = new RegExp("^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$");
    if (reg.test(str)) {
        return true; //验证通过
    }
    return false; //验证失败
}
//中国手机格式验证
Check.prototype.checkMobiePhone = function () {
    var str = this.currentSelector.value;
    var reg = new RegExp("^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$");
    if (reg.test(str)) {
        return true; //验证通过
    }
    return false; //验证失败
}
//匹配中国邮政编码(6位)
Check.prototype.checkZip = function () {
    var str = this.currentSelector.value;
    var reg = new RegExp("[1-9]\d{5}(?!\d)");
    if (reg.test(str)) {
        return true; //验证通过
    }
    return false; //验证失败
}
//身份证验证
Check.prototype.checkId = function () {
    var str = this.currentSelector.value;
    //(15位)
    var isIDCard1 = "^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$";
    //(18位) 
    var isIDCard2 = "^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$";
    var reg;
    if (str.length == 15) {
        reg = new RegExp(isIDCard1);
    } else {
        reg = new RegExp(isIDCard2);
    }
    if (reg.test(str)) {
        return true; //验证通过
    }
    return false; //验证失败
}
//密码强度验证
Check.prototype.checkPwd = function () {
    var str = this.currentSelector.value;
    var reg = new RegExp("^[a-zA-Z0-9_]{6,18}$");
    if (reg.test(str)) {
        return true; //验证通过
    }
    return false; //验证失败
}
//日期格式验证:YYYY-MM-DD || YYYY/MM/DD 的日期格式
Check.prototype.checkDate = function () {
    var str = this.currentSelector.value;
    var reg = new RegExp("^(\d{4})(-|\/)(\d{1,2})\2(\d{1,2})$/");
    if (reg.test(str)) {
        return true; //验证通过
    }
    return false; //验证失败
}
//2-----------------
//3----------------
Check.prototype.allFieldsChecked = function () {
    if (this.num >= this.numToValid) {
        return true;
    }
    else {
        return false;
    }
}
//添加没有 验证通过的图片和文字
Check.prototype.invalid = function () {
    //模拟阶段3指导（2）完成
    removeNode(this.currentSelector.validImg);
    InsertAfter(this.currentSelector.parentNode, this.currentSelector.validImg, this.currentSelector);
    if (!this.currentSelector.isValid) {
        this.num++;
    }
    if (!this.allFieldsChecked()) {
        // $(this.submit).disabled = false;
        document.getElementById(this.submit).disabled = false;
    }
    this.currentSelector.isValid = true;
}
Check.prototype.valid = function () {
    removeNode(this.currentSelector.invalidImg);
    InsertAfter(this.currentSelector.parentNode, this.currentSelector.invalidImg, this.currentSelector);
    if(this.currentSelector.isValid){
        this.num--;
    }
    if (this.allFieldsChecked()) {
        //$(this.submit).disabled = true;
        document.getElementById(this.submit).disabled = true;
    }
    this.currentSelector.isValid = false;
}
//<script src="check.js"></script>
//</head>
//<body onload="ck=new Check('form1',6,'submit','img/check.gif','img/error.gif')">
//    <form id="form1" runat="server" onsubmit="if(!ck.allFieldsChecked()) return false;">
//    <div>
//    </div>
//    </form>
//</body>
==========================
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testForms.aspx.cs" Inherits="JsValidateFrame.testForms" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
   <%-- <script src="check2.js"></script>--%>
    <script src="check.js" type="text/javascript"></script>
</head>
<body onload="ck=new Check('liveForm',2,'submit','img/check.gif','img/error.gif');">
    <form id="liveForm" method="post" onsubmit="if(!ck.allFieldsChecked()) return false;">
     <fieldset>
         <div></div>
         name:<input type="text" id="name" name="name" onblur="ck.check(this);" maxlength="10" /><br />
         pwd:<input type="text" id="pwd" name="pwd" onblur="ck.check(this,'pwd');" maxlength="10" /><br />
         <input type="submit" id="submit" value="Register" class="action" />
     </fieldset>
    </form>
</body>
</html>

check2的更多相关文章

  1. jquery ajax解析

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...

  2. jQuery系列：DOM操作

    1. 访问元素 在访问页面时,需要与页面中的元素进行交互式的操作.在操作中,元素的访问主要包括对元素属性.内容.值.CSS的操作. 1.1 元素属性操作 1.1.1 设置或返回被选元素的属性值 语法格 ...

  3. JQuery知识点总结

    一. 1.JavaScript是Netscape公司开发的一种脚本语言(scripting language).JavaScript的出现实现了使得网页和用户之间实时的,动态的和交互的关系,使网页包含 ...

  4. 用css改变默认的checkbox样式

    自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html&g ...

  5. ACM模板（持续补完）

    1.KMP #include<cstring> #include<algorithm> #include<cstdio> using namespace std; ...

  6. ACM ICPC Vietnam National Second Round

    A. Stock Market 枚举哪一天买入,哪一天卖出即可. #include<cstdio> #include<algorithm> using namespace st ...

  7. JavaEE连接数据库练习

    登录端 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncod ...

  8. 【jQuery示例】遍历表单数据并显示

    <!DOCTYPE html> <html> <head> <style> body, select { font-size:14px; } form ...

  9. jQuery入门（4）jQuery中的Ajax应用

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

随机推荐

  1. [WPF] 为Style 里的button添加鼠标点击响应事件

    一个TabControl, 用的是PagedTabControl style, 在style中有个button, button在style里已经写了click事件,但是现在还需要加上一段功能,就是在响 ...

  2. [帖子收集]环境光遮蔽（Ambient Occlusion）

    环境光遮蔽,效果示例图 图片左边是一条龙的简单模型,呈现在一个均匀照明的环境中.尽管模型中有一些明暗不同的区域,但大部分光照都是均匀的.虽然模型有着相当复杂的几何形状,但看上去比较光滑平坦,没有明显的 ...

  3. URL中文参数乱码的一个解决办法

      浏览器对有中文参数的url大部分都用utf-8编码,但我也曾经遇见过用GB2312编码的:如果遇见这样情况,那么接受到的参数就会出现乱码.乱码情况视服务器解码方式,Asp.Net网站一般默认为ut ...

  4. Objective-C与Swift下的自定义打印函数(Debug和Release)

    1.Objective-C 在使用Objective-C进行开发的过程中,为了Debug会不断的设置打印函数.如下图是我们经常用的,用来测试监听方法的实现与否: NSLog(@"%s&quo ...

  5. oAuth 使得第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权

    OAUTH协议为用户资源的授权提供了一个安全的.开放而又简易的标准.与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可 ...

  6. OvS: ovs-ofctl adding parameters analysis

    if using dpdk, then OvS' datapath folder is ignored. Only OvS' userspace code are in use. According ...

  7. C++虚函数继承的bug

    闲来无事想测试一下:如果在派生类中重写基类的虚函数,那么允不允许改变虚函数的访问权限,结果颠覆了三观..... 基类Base,拥有public方法test(),test()为虚函数 派生类Derive ...

  8. 第七十八节，CSS3文本效果

    CSS3文本效果 一．文本阴影 CSS3提供了text-shadow文本阴影效果,这个属性在之前讲过,只是没有涉及浏览器 支持情况. 浏览器支持情况 text-shadow       Opera   ...

  9. [妙味JS基础]JS热身运动

    知识点总结 获取ID元素 document.getElementById(' ') 事件:鼠标事件.键盘事件.系统事件.表单事件.自定义事件 onclick onmouseout onmouseove ...

  10. 【Python@Thread】锁示例

    当出现竞态条件时候,即在同一个时刻只有一个线程可以进入临界区,需要使用同步. 常见的同步原语有两种:锁/互斥,信号量. 锁是最简单,最低级的机制. 首先看一个不使用锁时候的多线程示例: from at ...