//文件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\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?");
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>