//文件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. spring mvc 实现文件上传下载

    /** * 文件上传 * @param pictureFile */ @RequestMapping("/reportupload") public ResponseInfo up ...

  2. python2与python3

    一.print python2 print  "hello world !" python3 print("hello world!") 二.字符编码 pyth ...

  3. java中system.out.println()是什么意思

    在Java编程中,我们常常用System.out.println()方法来输出字符串,也许我们都已经猜到println()是方法名,但System是什么,out又是什么呢?这里就涉及用到一个stati ...

  4. c# 索引器方法

    索引器方法允许我们构建能够以类似访问数组的语法来访问内部子类型的自定义类型 在语法上索引器方法和属性的定义很类似,一样是使用get,set,不同的是索引器是使用this[]创建的. 一个简单的索引器代 ...

  5. Q & A

    1 使用linux命令或者shell实现:文件words存放英文单词,格式为每行一个英文单词(单词可以重复),统计这个文件中出现次数最多的前10个单词. cat words.txt | sort | ...

  6. mybatis的decimal精度缺失

    在mybatis里面用decimal确实方便,但是经过测试发现decimal默认只有一位小数,所以也不能滥用,如果是double类型的话还是要使用double

  7. 分布式缓存HttpRuntime.cache应用到单点登陆中_优化登陆

    以前的设计方案,是我们在数据库中放一个表,用作存储验证登陆成功的用户,并且生成用户TOKEN(令牌) 分布式缓存+集群的解决方案图: 相应的代码: DE层中配置文件: receiveTimeout=& ...

  8. DB2中coalesce函数的应用

    在ETL项目中经常会碰到这样的一种情况: 目标表中的某列来源于不同的源数据表A,B,C.如果在A中没有有效的数据则从B中取,如果B中没有则从C中取,如果C中也没有则设置为空值. 遇到这样的情况可能,有 ...

  9. 对“针对接口编程，而不是针对实现编程”的理解

    今天在阅读<Head First设计模式>的时候,看到了这句话:"针对接口编程,而不是针对实现编程",第一次见到的时候,不太清楚作者想表达的意思,想着到后来看看实例就懂 ...

  10. CentOS 下安装apt-get

    CentOS 下安装apt-get 最近在学习Linux系统时,网上好多帖子都是用apt-get里下载rpm包,于是就在Google上找了个CentOS下安装apt-get的方法 1.下载地址:htt ...