//文件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. Angular JS Scope（作用域）

    Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Scope 可应用在视图和控制器上. 当你在 Ang ...

  2. android设备中USB转串口demo 下载

    http://files.cnblogs.com/guobaPlayer/testUSB2Serial.apk USB转串口demo程序, 无需驱动,只要手机USB是OTG类型,插上我们的模块即可使用 ...

  3. 在java中json的使用案例

    import java.text.ParseException; import org.json.JSONArray; import org.json.JSONObject; public class ...

  4. php app版本升级的思路

    用户端传递当前app的版本号,再根据机型和app_type ,查找数据库里的版本号 ,去比较 ... CREATE TABLE `common_versioninfo` ( `id` int(11) ...

  5. 如何阅读一本书（[美] 莫提默·J. 艾德勒 / 查尔斯·范多伦 ）

               进入豆瓣读书 前言 2017年1月2日跟着熊猫书院开始了为期十月的阅读计划. 熊猫书院是一个微信公众号,但仅对熊猫书院学员开放.它是一个很好的读书产品,从入学申请.入学报到.班长 ...

  6. react起步

    react是一个用于构建用户界面JAVASCRIPT库. react主要用于构建UI,是MVC中的V(视图). react特点 1.声明式设计 2.高效 3.灵活 4.JSX 5.组件 6.单项响应的 ...

  7. 分布式版本控制系统Git-----4.Git 常用命令整理

    1. git init 初始化 git 目录 2. git add 添加文件 git add fileName       #添加指定文件 git add -i             #手工选择要添 ...

  8. HDU 5306 Gorgeous Sequence

    如果维护max,sum,那么可以得到一个暴力方法,如果t>=max,那可以return,否则往下更新,显然超时. 在上面基础上,再维护一下次大值,与最大值的个数.这样一来,次大值<t< ...

  9. zoj 1718 poj 2031 Building a Space Station

    最小生成树,用了Kruskal算法.POJ上C++能过,G++不能过... 算出每两个圆心之间的距离,如果距离小于两半径之和,那么这两个圆心之间的距离直接等于0,否则等于距离-R[i]-R[j]. # ...

  10. 浙大 pat 1023题解

    1023. Have Fun with Numbers (20) 时间限制 400 ms 内存限制 32000 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue ...