实用的JS表单验证提示效果

errMsg 是一个错误消息的数组,这样方便自定义,errName是对应错误信息元件名数组,这样可以非富自定义显示方式,FormValid.allName记录了所有有验证规则的字段名数级,在自定义中可以使用到。

表单验证提示效果

body{ color:#666666; font-size:12px}
h1{ font-size:20px;}
input{ border:#999999 1px solid; background-color:#FFFFEE}
.button2{ background-color:#FF9900; border-bottom:#E34A00 2px solid;border-right:#E34A00 2px solid; border-top:#FFB693 2px solid;border-left:#FFB693 2px solid; color:#FFFFFF; font-weight:bold}
dl {
font:normal 12px/15px Arial;
position: relative;
width: 350px;
}
dt {
clear: both;
float:left;
width: 80px;
padding: 4px 0 2px 0;
text-align: left;
}
dd {
float: left;
width: 200px;
margin: 0 0 8px 0;
padding-left: 6px;
}

.hint {
display: none;
position: absolute;
right: -160px;
width: 200px;
margin-top: -4px;
border: 1px solid #c93;
padding: 10px 12px;
background: #ffc url(/upload/2009-11/20091104144511488.gif) no-repeat -10px 5px;
}

.hint .hint-pointer {
position: absolute;
left: -10px;
top: 5px;
width: 10px;
height: 19px;
background: url(/upload/2009-11/20091104144511488.gif) left top no-repeat;
}

var FormValid = function(frm) {
this.frm = frm;
this.errMsg = new Array();
this.errName = new Array();

this.required = function(inputObj) {
if (typeof(inputObj) == "undefined" || inputObj.value.trim() == "") {
return false;
}
return true;
}

this.eqaul = function(inputObj, formElements) {
var fstObj = inputObj;
var sndObj = formElements[inputObj.getAttribute('eqaulName')];

if (fstObj != null && sndObj != null) {
if (fstObj.value != sndObj.value) {
return false;
}
}
return true;
}

this.gt = function(inputObj, formElements) {
var fstObj = inputObj;
var sndObj = formElements[inputObj.getAttribute('eqaulName')];

if (fstObj != null && sndObj != null && fstObj.value.trim()!='' && sndObj.value.trim()!='') {
if (fstObj.value 0) {
FormValid.showError(this.errMsg,this.errName);
frt = document.getElementsByName(this.errName[0])[0];

if (frt.type!='radio' && frt.type!='checkbox') {
frt.focus();
}
return false;
} else {
return true;
}
}

this.addErrorMsg = function(name,str) {
this.errMsg.push(str);
this.errName.push(name);
}

this.addAllName = function(name) {
FormValid.allName.push(name);
}

}
FormValid.allName = new Array();
FormValid.showError = function(errMsg) {
var msg = "";
for (i = 0; i \"\"])*$/;
RegExps.isDate = /^\d{4}-\d{1,2}-\d{1,2}$/;
RegExps.isTime = /^\d{4}-\d{1,2}-\d{1,2}\s\d{1,2}:\d{1,2}:\d{1,2}$/;

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}

function prepareInputsForHints() {
var inputs = document.getElementsByTagName("input");
for (var i=0; i

FormValid.showError = function(errMsg,errName) {
for (key in FormValid.allName) {
document.getElementById('errMsg_'+FormValid.allName[key]).innerHTML = '';
}
for (key in errMsg) {
document.getElementById('errMsg_'+errName[key]).innerHTML = errMsg[key];
}
}

表单验证提示效果

帐号:
注册帐号(只支持数字和字母,如:love,love520)
密码:
请输入密码,请最少输入最少6位最多12位密码
确认密码:

请再输入一次上面的密码

邮箱:
请输入邮箱(Email),推荐使用网易邮箱@163.com
生日:
1983
1984
1985

5
6
7
12

5
6
7
12
日请输入你的生日
QQ/MSN:
请输入你的QQ或MSN号码
电话:
请输入你的电话

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • javascript表单验证使用示例(javascript验证邮箱)

    被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单中的必填项目?用户输入的邮件地址是否合法?用户是否已输入合法的日期?用户是否在数据域 (numeric field) 中输入了文本?必填(或必选)项目 下面的函数用来检查用户是否已填写表单中的必填(或必选)项目.假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题): 复制代码 代码如下: function validate_required(field

  • jquery validate.js表单验证的基本用法入门

    这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript"> function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密码

  • JavaScript 表单验证正则表达式大全[推荐]

    具体和函数结合的使用方法,还请查看下篇文章 JavaScript 使用正则表达式进行表单验证的示例代码 复制代码 代码如下: 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[^x00-xff] 评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) 匹配空白行的正则表达式:ns*r 评注:可以用来删除空白行 匹配HTML标记的正则表达式:< (S*?)[^>]*>.*?

  • jquery表单验证插件(jquery.validate.js)的3种使用方式

    jquery  验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery  插件和 jquery 验证插件: 第一步:引入插件 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jq

  • js 常用正则表达式表单验证代码

    正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下:测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证.替换文本.可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字.根据模式匹配从字符串中提取一个子字符串.可以用来在文本或输入字段中查找特定文字. 基本语法 在对正则表达式的功能和作用有了初步的了解之后,我们就来具体看一下正则表

  • js用正则表达式来验证表单(比较齐全的资源)

    在学习网页中的表单验证,顺便学习下正则表达式 在网上找了后发现了一个比较齐全的资源,稍微进行了一下排版 复制代码 代码如下: // 检查是否为有效的真实姓名,只能含有中文或大写的英文字母 function isValidTrueName(strName){ var str = Trim(strName); //判断是否为全英文大写或全中文,可以包含空格 var reg = /^[A-Z u4E00-u9FA5]+$/; if(reg.test(str)){ return false; } ret

  • Javascript的表单验证长度

    JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 该采用什么样的方式对用户作出提醒呢?你一定不想用alert()提示框 在输入域后加一个sqan标签 <input id="phone" name="phone" type="text" size="12" onBlur="validateNonEmptyFun(this,document.getElementById(

  • javascript制作的简单注册模块表单验证

    一个注册框  进行表单验证处理 如图 有简单的验证提示功能 代码思路也比较简单 输入框失去焦点时便检测,并进行处理 表单具有 onsubmit = "return check()"行为,处理验证情况 点击提交表单按钮时,进行最终的验证,达到是否通过表单提交的请求. 先是最基本的html+css部分 <style type="text/css"> body{margin:0;padding: 0;} .login{position:relative;mar

  • 简单的js表单验证函数

    网站制作中,表单验证的功能是很常用的.有些时候,用一些成型的js控件会比较方便,但是又过于庞大和难以维护(本人的js水平不高)所以干脆自己写了一个.至于好不好,灵活不灵活,还请大家指点(先上图,很难看,请不要介意): 代码: 复制代码 代码如下: 表单验证js代码 var fv ={    lang: "zh-cn",  //错误提示语言    inValidedStr: "=",  //初始随意复制,使其长度不为0    mail: function(elemen

  • Extjs表单常见验证小结

    复制代码 代码如下: //放在onReady的function(){}中 Ext.QuickTips.init(); //为组件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息. Ext.form.Field.prototype.msgTarget='side'; //提示的方式,枚举值为: qtip-当鼠标移动到控件上面时显示提示; title-在浏览器的标题显示,但是测试结果是和qtip一样的; under-在控件的底下显示错误提示; side-在控件右边显示一个错误图标,鼠

随机推荐