fly-sky
- 浏览: 203130 次
- 性别:
- 来自: 湖南
-
文章分类
最新评论
万能js表单骓证是一款比较好的表单js代码,你只需要了解基本用法即可.
使用方法:
Validator = {
Require : /.+/,
Email : /^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$/,
Phone : /^((\(\d{3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}$/,
Mobile : /^((\(\d{3}\))|(\d{3}\-))?13\d{9}$/,
Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,
IdCard : /^\d{15}(\d{2}[A-Za-z0-9])?$/,
Currency : /^\d+(\.\d+)?$/,
Number : /^\d+$/,
Zip : /^[1-9]\d{5}$/,
QQ : /^[1-9]\d{4,8}$/,
Integer : /^[-\+]?\d+$/,
Double : /^[-\+]?\d+(\.\d+)?$/,
English : /^[A-Za-z]+$/,
Chinese : /^[\u0391-\uFFE5]+$/,
UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/,
IsSafe : function(str){return !this.UnSafe.test(str);},
SafeString : "this.IsSafe(value)",
Limit : "this.limit(value.length,getAttribute('min'), getAttribute('max'))",
LimitB : "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))",
Date : "this.IsDate(value, getAttribute('min'), getAttribute('format'))",
Repeat : "value == document.getElementsByName(getAttribute('to'))[0].value",
Range : "getAttribute('min') < value && value < getAttribute('max')",
Compare : "this.compare(value,getAttribute('operator'),getAttribute('to'))",
Custom : "this.Exec(value, getAttribute('regexp'))",
Group : "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))",
ErrorItem : [document.forms[0]],
ErrorMessage : ["以下原因导致提交失败：\t\t\t\t"],
Validate : function(theForm, mode){
var obj = theForm || event.srcElement;
var count = obj.elements.length;
this.ErrorMessage.length = 1;
this.ErrorItem.length = 1;
this.ErrorItem[0] = obj;
for(var i=0;i<count;i++){
with(obj.elements[i]){
var _dataType = getAttribute("dataType");
if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined") continue;
this.ClearState(obj.elements[i]);
if(getAttribute("require") == "false" && value == "") continue;
switch(_dataType){
case "Date" :
case "Repeat" :
case "Range" :
case "Compare" :
case "Custom" :
case "Group" :
case "Limit" :
case "LimitB" :
case "SafeString" :
if(!eval(this[_dataType])) {
this.AddError(i, getAttribute("msg"));
}
break;
default :
if(!this[_dataType].test(value)){
this.AddError(i, getAttribute("msg"));
}
break;
}
}
}
if(this.ErrorMessage.length > 1){
mode = mode || 1;
var errCount = this.ErrorItem.length;
switch(mode){
case 2 :
for(var i=1;i<errCount;i++)
this.ErrorItem[i].style.color = "red";
case 1 :
alert(this.ErrorMessage.join("\n"));
this.ErrorItem[1].focus();
break;
case 3 :
for(var i=1;i<errCount;i++){
try{
var span = document.createElement("SPAN");
span.id = "__ErrorMessagePanel";
span.style.color = "red";
this.ErrorItem[i].parentNode.appendChild(span);
span.innerHTML = this.ErrorMessage[i].replace(/\d+:/,"*");
}
catch(e){alert(e.description);}
}
this.ErrorItem[1].focus();
break;
default :
alert(this.ErrorMessage.join("\n"));
break;
}
return false;
}
return true;
},
limit : function(len,min, max){
min = min || 0;
max = max || Number.MAX_VALUE;
return min <= len && len <= max;
},
LenB : function(str){
return str.replace(/[^\x00-\xff]/g,"**").length;
},
ClearState : function(elem){
with(elem){
if(style.color == "red")
style.color = "";
var lastNode = parentNode.childNodes[parentNode.childNodes.length-1];
if(lastNode.id == "__ErrorMessagePanel")
parentNode.removeChild(lastNode);
}
},
AddError : function(index, str){
this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index];
this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str;
},
Exec : function(op, reg){
return new RegExp(reg,"g").test(op);
},
compare : function(op1,operator,op2){
switch (operator) {
case "NotEqual":
return (op1 != op2);
case "GreaterThan":
return (op1 > op2);
case "GreaterThanEqual":
return (op1 >= op2);
case "LessThan":
return (op1 < op2);
case "LessThanEqual":
return (op1 <= op2);
default:
return (op1 == op2);
}
},
MustChecked : function(name, min, max){
var groups = document.getElementsByName(name);
var hasChecked = 0;
min = min || 1;
max = max || groups.length;
for(var i=groups.length-1;i>=0;i--)
if(groups[i].checked) hasChecked++;
return min <= hasChecked && hasChecked <= max;
},
IsDate : function(op, formatString){
formatString = formatString || "ymd";
var m, year, month, day;
switch(formatString){
case "ymd" :
m = op.match(new RegExp("^\\s*((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})\\s*$"));
if(m == null ) return false;
day = m[6];
month = m[5]-1;
year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10));
break;
case "dmy" :
m = op.match(new RegExp("^\\s*(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))\\s*$"));
if(m == null ) return false;
day = m[1];
month = m[3]-1;
year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10));
break;
default :
break;
}
var date = new Date(year, month, day);
return (typeof(date) == "object" && year == date.getFullYear() && month == date.getMonth() && day == date.getDate());
function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;}
}
}
使用方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>这是一个测试</title> <script src="inc/js.js" charset="utf-8" language="javascript"></script> </head> <body> <form id="form1" name="form1" method="post" action="email.php?action=sends" onsubmit="return Validator.Validate(this,3);"> <table width="100%" cellspacing="0" cellpadding="5" border="1" align="center" class="table"> <input type="hidden" name="id" value=""><tbody> <tr><td width="15%" align="right">会员账号：</td> <td> <input type="text" name="user" value="" size="20" datatype="LimitB" min="3" max="20" msg="用户名必须在3,20个字节之内"></td></tr> <tr><td align="right"> 密码：</td> <td><input type="password" name="password" value="" size="40" datatype="LimitB" min="6" max="20" msg="密码必须在6,20个字节之内"></td></tr> <tr><td align="right">重复密码： </td><td><input type="password" name="password2" value="" size="40" datatype="Repeat" to="password" msg="两次输入的密码不一致"></td></tr> <tr><td align="right">邮箱地址： </td><td><input type="text" datatype="Email" msg="请正确填写电子邮件" name="email" value="" size="40"></td></tr> <tr><td align="right">积分： </td><td><input type="text" name="points" value="" size="20"></td></tr> <tr><td align="right">真实姓名： </td><td><input type="text" name="name" value="" size="20"></td></tr> <tr><td align="right">性别： </td><td> <select name="sex"> <option selected="">性别</option> <option value="女">女</option> <option value="男">男</option> </select></td></tr> <tr><td align="right">出生日期： </td><td><input type="text" format="ymd" datatype="Date" msg="请正确填写日期格式" name="brith" value="" size="20"> 日期格式为(yyyy-mm-dd)</td></tr> <tr><td align="right">地区： </td><td> <select onchange="chageprovice(this.value);" id="provice" name="provice"> <option value="1">北京市</option><option value="2">上海市</option><option value="3">天津市</option><option value="4">重庆市</option><option value="5">河北省</option><option value="6">山西省</option><option value="7">内蒙古自治区</option><option value="8">辽宁省</option><option value="9">吉林省</option><option value="10">黑龙江省</option><option value="11">江苏省</option><option value="12">浙江省</option><option value="13">安徽省</option><option value="14">福建省</option><option value="15">江西省</option><option value="16">山东省</option><option value="17">河南省</option><option value="18">湖北省</option><option value="19">湖南省</option><option value="20">广东省</option><option value="21">广西壮族自治区</option><option value="22">海南省</option><option value="23">四川省</option><option value="24">贵州省</option><option value="25">云南省</option><option value="26">西藏自治区</option><option value="27">陕西省</option><option value="28">甘肃省</option><option value="29">青海省</option><option value="30">宁夏回族自治区</option><option value="31">新疆维吾尔自治区</option><option value="32">台湾省</option><option value="33">香港特别行政区</option><option value="34">澳门特别行政区</option></select> <select onchange="chagecity(this.value);" id="city" name="city"> <option value="35">东城区</option><option value="36">西城区</option><option value="37">崇文区</option><option value="38">宣武区</option><option value="39">朝阳区</option><option value="40">丰台区</option><option value="41">石景山区</option><option value="42">海淀区</option><option value="43">门头沟区</option><option value="44">房山区</option><option value="45">通州区</option><option value="46">顺义区</option><option value="47">昌平区</option><option value="48">大兴区</option><option value="49">怀柔区</option><option value="50">平谷区</option><option value="51">密云县</option><option value="52">延庆县</option></select> <select id="area" name="area" style="display: none;"> <option selected="">--请输入城区--</option></select> </td></tr> <tr><td align="right">手机： </td><td><input type="text" datatype="Mobile" msg="请填手机" name="phone" value="" size="20"></td></tr> <tr><td align="right">电话： </td><td><input type="text" datatype="Phone" msg="请填电话地址" name="tel" value="" size="20"> 电话格式为(020-82868828)</td></tr> <tr><td align="right">地址： </td><td><input type="text" datatype="Require" msg="请填居住地址" name="address" value="" size="40"></td></tr> <tr align="center"><td colspan="2"><input type="submit" name="Submit_edit" value="确定修改"></td></tr></tbody></table> </form> </body> </html>
分享到：
发表评论
-
ext-js基础
2011-04-25 22:43 1050javascript的关键字 关键 ... -
具备闹钟功能js日历
2011-04-22 17:50 1731日历写得太多，没有什么好说的，这个是能够保存备忘信息，具备闹钟 ... -
js 广告
2011-01-14 17:03 7471、悬浮页面流动广告(code.zip) 2、头部文横显隐广告 ... -
开始ExtJS
2011-01-12 15:27 27181、获得ExtJS 要使用ExtJS，那么首先要得到ExtJS ... -
DWR详解
2010-11-30 13:10 974什么是DWR(Direct Web Remote)？ DWR是 ... -
万能日历制作
2010-01-15 13:33 1200万能日历制作: <!DOCTYPE HTML PUB ... -
垣克大战
2009-10-24 20:59 2493本面使用jquery-1.3.2和面定位map.jsp, ... -
俄罗斯方块
2009-09-29 20:35 14411.初始化下方块组合的图形阶面 //方块的大小 SQUARE ... -
javascript小甜饼_cookie方法
2009-09-24 19:28 828<!DOCTYPE html PUBLIC " ... -
javascript日历
2009-09-23 21:21 1186<!DOCTYPE html PUBLIC " ...
相关推荐
本主题聚焦于“万能通用智能JS表单验证”，这是一种利用JavaScript实现的高效、灵活的表单验证技术。表单验证是用户交互过程中的关键环节，它能够确保用户输入的数据符合预设的规则，从而减少服务器端的压力，提升...
javascript很好很强大的JS表单验证 javascript很好很强大的JS表单验证
js表单验证实例，HTML文件,javascript常用表单验证： 账号、密码、身份证等
网上常见的用JS编写的注册表单验证的代码，非常实用哦
jQuery是一个广泛使用的JavaScript库，它简化了DOM操作，事件处理和Ajax交互，而"万能表单验证库"则在此基础上进一步优化了表单处理。 该库的核心功能包括： 1. **实时验证**：在用户输入时进行即时反馈，提高用户...
首先，让我们详细探讨一下`js表单验证`。JavaScript是一种在客户端运行的脚本语言，它可以在用户填写表单时实时检查输入，无需等待数据提交到服务器。通过JavaScript进行表单验证可以减少不必要的服务器负载，并即时...
JavaScript，作为一种广泛应用于Web开发的脚本语言，其在处理用户交互、特别是表单验证方面起着至关重要的作用。在创建动态和响应式的网页时，JS表单验证是确保数据质量和用户输入有效性的关键环节。以下是一些关于...
JavaScript（简称JS）是网页开发中用于实现客户端交互和数据验证的重要工具。在网页表单设计中，实时动态验证能够极大地提升用户体验，因为它允许用户在输入时立即得到反馈，了解其填写的信息是否符合要求，无需等待...
社区有许多成熟的表单验证库，如`Validator.js`、`Formik`、`yup`等，它们提供更丰富的验证规则、错误处理和用户体验优化。 7. **错误提示** 提供清晰、友好的错误提示至关重要。错误消息应简洁明了，指导用户...
在学习和研究这个万能表单系统时，你需要理解PHP的基础语法、表单处理机制、数据库操作以及可能涉及的前端技术，如HTML、CSS和JavaScript。通过深入学习，你可以掌握如何利用这样的工具高效地构建和管理各种复杂的...
js表单验证 表单的验证一直是网页设计者头痛的问题，表单验证类 Validator就是为解决这个问题而写的，旨在使设计者从纷繁复杂的表单验证中解放出来，把精力集中于网页的设计和功能上的改进上。 Validator是基于...
JS表单验证大全JS表单验证大全JS表单验证大全JS表单验证大全JS表单验证大全JS表单验证大全JS表单验证大全JS表单验证大全
在JavaScript中，表单提交验证是确保用户输入的数据符合预设规则的重要环节，这有助于防止无效数据的提交，提升用户体验，以及保护服务器免受恶意数据的冲击。本篇将详细介绍JavaScript表单验证函数的一些关键知识点...
- **jquery.idealforms.min.js**：JavaScript文件，实现了表单的动态行为、键盘操作、验证等功能。需要与CSS文件一起引入到项目中，以实现插件的全部功能。 - **readme.txt**：通常包含插件的安装指南、使用方法和...
JavaScript，简称JS，是网页开发中不可或缺的一部分，主要用于实现客户端的交互逻辑和增强用户体验。本篇文章将深入探讨三个关键知识点：JS表单验证、JS导出Excel以及JS验证。 一、JS表单验证 在Web应用程序中，...
比较实用的javascript做的表单验证，验证的表单域包括用户名、密码、密码...表单域基本通过获得焦点显示提示信息，失去焦点进行验证，还有提交表单验证。提交表单先进行必填项不能为空验证，再进行正则表达式匹配验证。
"一个完美的js表单验证案例"利用JavaScript（特别是jQuery库）实现了这一功能，提供了高效、用户友好的验证机制。 JavaScript作为客户端脚本语言，可以直接在用户的浏览器上运行，这使得表单验证可以实时进行，减少...
"万能Form表单验证"是一种高效且灵活的解决方案，它提供了全面的验证功能，包括中文字符、数字以及电话号码等多种数据类型的验证。下面将详细阐述这个主题。 一、表单验证的重要性 表单验证的主要目的是确保用户...
Node-form-validator是这个库的名称，版本为1.0，它是一个基于JavaScript的验证工具，特别适用于Node.js环境。此库允许开发者定义各种验证规则，如非空、邮箱格式、电话号码等，以确保表单提交的数据符合预期。 `...
JavaScript（简称JS）是网页开发中不可或缺的一部分，尤其在表单验证方面，它扮演着至关重要的角色。在网页设计中，表单验证是确保用户输入数据有效性和安全性的关键步骤。通过JavaScript，开发者可以在客户端实时...