//文件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. redis cluster中添加删除重分配节点例子

    redis cluster配置好,并运行一段时间后,我们想添加节点,或者删除节点,该怎么办呢. 一,redis cluster命令行     //集群(cluster)  CLUSTER INFO 打 ...

  2. Dynamics CRM 相关资料

    links: 1.The Microsoft Dynamics CRM Team Blog 2.申请试用Dynamics CRM 2013 http://www.microsoft.com/zh-cn ...

  3. centos 安装cacti监控

    CentOS 6下Cacti搭建文档 安装依赖关系 yum -y install mysql-devel httpd php php-pdo php-snmp php-mysql lm_sensors ...

  4. 分子量(Molar Mass,ACM/ICPC Seoul 2007,UVa 1586)

    #include<stdio.h>#include<stdlib.h>#include<string.h>int main(){ char s[20]; scanf ...

  5. 解决 git extensions 每次提交需要输入用户名和密码

    打开git bash 输入用户名和密码 git config --global user.name "username" git config --global user.emai ...

  6. mysql语句中----删除表数据drop、truncate和delete的用法

    程度从强到弱 1.drop  table tb        drop将表格直接删除,没有办法找回 2.truncate (table) tb       删除表中的所有数据,不能与where一起使用 ...

  7. iOS 10权限崩溃问题

    手机升级到iOS10 Beta版本后,再次进行真机调试时会遇见权限崩溃问题,崩溃原因如下:This app has crashed because it attempted to access pri ...

  8. C#委托与事件讲解(一)

    首先,我们还是先说说委托吧,从字面上理解,只要是中国人应该都知道这个意思,除非委托2个中文字不认识,举个例子,小明委托小张去买车票.     但是在我们的程序世界里,也是这么的简单吗?当然,什么是OO ...

  9. android 操蛋的gradle

    首先看语法: -include {filename} 从给定的文件中读取配置参数 -basedirectory {directoryname} 指定基础目录为以后相对的档案名称 -injars {cl ...

  10. Linux服务器导入导出SVN项目

    导出项目: # svnadmin dump /var/svn/pro1 > /mydata/pro1.backup 导入项目: 新建项目仓库: # svnadmin create /var/sv ...