//文件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. foreach绑定

    目的 foreach可以将一个数组中的实体循环的进行绑定.这在将一个list显示成table时非常有用. 假设数组是observable的,当在绑定后做了add, remove,或者重新排序后,绑定会 ...

  2. spring HttpServletRequest 简介

    前提:工作遇到controller中通过注解的方式注入 @Resourceprivate HttpServletRequest request;我们都知道spring 默认是单例,当遇到并发的时候线程 ...

  3. LeetCode 280. Wiggle Sort C#

    Given an unsorted array nums, reorder it in-place such that nums[0] <= nums[1] >= nums[2] < ...

  4. 防范CSRF（一）

    CSRF是跨网站伪造请求的缩写.大致的攻击流程是,黑客获得浏览器向服务器发送的请求,然后对请求进行修改,让服务器执行指定的操作. 防范方式可以使用微软提供的解决方案. View放置Html.AntiF ...

  5. jquery如何获取url中问号后面的数值

    假如路径是这样的:www.domain.com/list/?menu=1 var locationUrl = location.search.substring(6); switch(location ...

  6. workerman简单例子

    workerman下载地址 http://www.workerman.net/ html <!DOCTYPE html> <html> <head> <tit ...

  7. MAC下安装automake autoconf工具

    I noticed today that while Mac OS 10.6 (specifically, 10.6.2) comes with automake and autoconf, the ...

  8. winform上传文件

    //上传图片 文件 public int addUpPic( String strProCode,String strFileName,String strUpType) { //strFileNam ...

  9. SpringMVC初步——HelloWorld的实现

    开通博客园好几个月了,今天开始要用博客园记录自己的学习过程! 目录: 导包: 1. 配置web.xml文件的springDispatcherServlet 在xml中 alt+/ 找到springdi ...

  10. 第五十六节，python实现支持并发、断点续传的Ftp程序

    一.要求 1.用户md5认证 2.支持多用户同时登陆(并发) 3.进入用户的命令行模式,支持cd切换目录,ls查看目录子文件 4.执行命令(ipconfig) 5.传输文件: a.支持断点续传 b.传 ...